일안하고블로그

[NextJs] 3. nextjs styled-component material ui 적용 본문

React/NextJS

[NextJs] 3. nextjs styled-component material ui 적용

대한93 2021. 1. 22. 16:10

next js

드디어 Next Js를 다뤄 봅니다. 

Next Js 를 시작하기 전에 우선 알아야 할 것이 있습니다. 1장 2장 기초지식 ? 조금을 가지고 작업을 해야하기 때문에 이전 작업 내용을 확인해주세요. 

 

2021/01/22 - [React/NextJS] - [Next Js ]1. React + Typescript +nextJs 적용 법 create-next-app

2021/01/22 - [React/NextJS] - [Next Js] 2. create-next-app 에 Eslint & prettier적용하기

 

또한 블로그에서 보는 내용 보단 아래링크에서 next js의 상세 설명을 조금은 보시고 작업하는게 정말 좋습니다. (저도 다이해한 것은 아닙니다 ㅠㅠ )

 

nextjs.org/docs

 

Getting Started | Next.js

Get started with Next.js in the official documentation, and learn more about all our features!

nextjs.org

 

create-next-app에서 페이지는 /pages 폴더 내부에 만들어야합니다.

- create-next-app에서 파일을 만들고 가장먼저 실행되어 있는 파일은 /pages/_app.tsx파일입니다. 

- create-next-app에서 /pages/_app.tsx파일보다 먼저 실행되는 파일은 _document.tsx파일입니다.

 

 

1. 명령어 실행 

 yarn add --dev @material-ui/styles styled-components babel-plugin-module-resolver

 

2. /pages 폴더 내부에 _document.tsx파일을 만들어주세요 .

import Document, {
	DocumentContext,
	Html,
	Main,
	Head,
	NextScript,
} from "next/document";
import { ServerStyleSheets } from "@material-ui/styles";
import { ServerStyleSheet } from "styled-components";

class MyDocument extends Document {
	static async getInitialProps(ctx: DocumentContext) {
		const styledComponentsSheet = new ServerStyleSheet();
		const materialSheets = new ServerStyleSheets();
		const originalRenderPage = ctx.renderPage;
		try {
			ctx.renderPage = () =>
				originalRenderPage({
					enhanceApp: (App) => (props) =>
						styledComponentsSheet.collectStyles(
							materialSheets.collect(<App {...props} />),
						),
				});
			const initialProps = await Document.getInitialProps(ctx);
			return {
				...initialProps,
				styles: (
					<>
						{" "}
						{initialProps.styles} {materialSheets.getStyleElement()}{" "}
						{styledComponentsSheet.getStyleElement()}{" "}
					</>
				),
			};
		} finally {
			styledComponentsSheet.seal();
		}
		const initialProps = await Document.getInitialProps(ctx);
		return { ...initialProps };
	}
	render() {
		return (
			<Html lang="ko">
				<Head>
					<meta charSet="utf-8" />
				</Head>
				<body>
					<Main />
					<NextScript />
				</body>
			</Html>
		);
	}
}

export default MyDocument;

 

3. local에 utils/theme.tsx파일을 만듭니다. styled-component에서 적용되는 테마설정을 하려고 합니다.  

 

theme.tsx

const theme = {
	// 컬러
	MAIN_BLUE: "#0a7b95",
	MAIN_LIGHT_BLUE: "#5b83fc",
	RED: "#FC5B5B",
	LIGHT_RED: "#ff6464",
	WHITE: "#FFFFFF",
	VERY_LIGHT_GRAY: "#FAFAFA",
	LIGHT_GRAY: "#DDDDDD",
	LIGHT_GRAY2: "#959595",
	MEDIUM_GRAY: "#C9C9C9",
	DARK_GRAY: "#848484",
	VERY_DARK_GRAY: "#848484",
	BROWNISH_GRAY: "#676767",
	BLACK: "#000000",
	BLACK_TWO: "#393939",
	// 폰트
	HEADER: "18px",
	HEADLINE: "36px",
	TITLE: "27px",
	LARGE_BODY: "20px",
	BODY: "17px",
	SECONDARY_BODY: "14px",
	THIRD_BODY: "13px",
	BTN: "17px",
};

export default theme;

 

4. _app.tsx 파일 수정

 

import { AppProps } from "next/app";
import { NextPage } from "next";
import { createGlobalStyle, ThemeProvider } from "styled-components";
import theme from "utils/theme";

const GlobalStyle = createGlobalStyle`
	
	body {
		padding: 0;
		margin: 0;
		font-family: SpoqaHanSans-kr, Roboto, -apple-system, BlinkMacSystemFont, Segoe UI,  Oxygen,
			Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	}
}
`;

const MyApp: NextPage<AppProps> = ({ Component, pageProps }: AppProps) => {
	return (
		<ThemeProvider theme={theme}>
			<Component {...pageProps} />
			<GlobalStyle />
		</ThemeProvider>
	);
};

export default MyApp;

 

간단하게 설명을 드리면 

 

- 가장먼저 App.tsx는 타입스크립트 파일이기 때문에 interface 설정을 해두었습니다. 

- <ThemeProvider> 태그는 styled-compoent에서 제공하는것을 메인에 감싸고 그안에 아까 설정해두었던 theme.tsx파일을 입힙니다.

- 글로벌 스타일은 제가 설정한것처럼 styled-component에서 제공하는 createGlobalStyle을 사용해서 넣습니다. 

 

5. 로컬에 .babelrc 파일 추가 

 

.babelrc 

{
    "presets": ["next/babel"],
    "plugins": [
        ["styled-components", { "ssr": true }],
        [
          "module-resolver",
          {
            "root": ["./"],
            "alias": {
            "@src": "./src"
          },
          "extensions": [".js", ".jsx", ".tsx"]
          }
        ]
      ]
      
  }

 

6. pages/ 폴더 내부에 index.tsx파일 수정 

 

import React from "react";
import styled from "styled-components";

const Main = styled.div`
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	color: ${(props) => props.theme.MAIN_BLUE}; // theme.js에서 가져온것
`;

const Index: React.FC = () => {
	return (
		<div>
			<Main>안녕하세요 styled-components 적용 완료~~!</Main>
		</div>
	);
};
export default Index;

pages/index.tsx

 

파일을 실행시켜보겠습니다.

yarn dev

 

localhost:3000번으로 가서 화면이 어떻게 나오는지 확인하겠습니다. 

 

local 화면

저처럼 나오시면 성공입니다. ^^ 

 

 

혹시 설정위치를 잘못 잡으셨을까바 소스트리남깁니다.  

소스트리

앞으로 정리할 router 계념과 counter 제작 redux적용과 같은 개념은 약간의 react 지식과 next js 지식이 있어야합니다. 

 

앞으로 블로그 정리 계획

- nextJs router 사용기

- nextJs counter 제작 

- nextJs api 가상으로 만들고 사용  

- nextJs api 가져오기

- nextJs redux / redux- saga 적용

- nextJs github 올리기 

- nextJs vercel 배포 

- nextJs 가상 로그인 만들기 

저작자표시

'React > NextJS' 카테고리의 다른 글

[NextJs] 4. nextjs redux typescript 적용 예제 counter 만들기  (0) 2021.01.27
[NextJs] 2. create-next-app 에 Eslint & prettier적용하기  (0) 2021.01.22
[NextJs ]1. React + Typescript +nextJs 적용 법 create-next-app  (0) 2021.01.22
'React/NextJS' Related Articles more
Comments