Next JS + Material UI + Styled Component 설정 방법
React기반의 프론트엔드 기술이 많은 인기를 얻으면서 React기술을 사용한 Next JS의 인기가 조금씩 상승하고 있습니다.
하지만 Next JS를 사용하면서 다른 인기 프론트엔드 라이브러리인 Material UI와 Styled Component를 사용하려면 별도로 설정을 해주어야 합니다. 이를 하는 방법을 설명하겠습니다.
Next JS, Material UI, Styled Components 설치 및 기본적인 프로젝트 설정은 가정하겠습니다.
가장 먼저 styled-components용 babel 플러그인
babel-plugin-styled-components를 개발용으로 설치하여야 합니다.
아래의 커맨드를 Window의 cmd, MacOS의 terminal, Linux의 shell에서 실행해주어야 합니다.
yarn add -D babel-plugin-styled-components
# OR
npm install --save-dev babel-plugin-styled-components
프로젝트용 Babel을 설정해 줍니다.
project/.babelrc
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
보통은 _document.js 파일 없이도 Next JS를 사용 가능하지만
기본 설정을 오버라이드 하기 위해 파일을 생성 후 아래의 코드를 입력하여 줍니다.
project/pages/_document.js
import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/styles';
import { ServerStyleSheet } from 'styled-components'
class _Document extends Document {
static async getInitialProps (ctx) {
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: (
<React.Fragment>
{initialProps.styles}
{materialSheets.getStyleElement()}
{styledComponentsSheet.getStyleElement()}
</React.Fragment>
);
}
} finally {
styledComponentsSheet.seal();
}
}
render() {
return (
<html lang="en" dir="ltr">
<Head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
export default _Document;
마찬가지로 _app.js 파일도 별도의 설정 없이 Next JS를 사용이 가능하지만
서버사이드에서 삽입한 CSS를 제거하고 테마를 프로젝트 전체적으로 Provide 하고
material ui의 css를 프로젝트에 설정하기 위해 아래의 코드를 삽입합니다.
project/pages/_app.js
import React from 'react';
import Head from 'next/head';
import App from 'next/app';
import { ThemeProvider } from "styled-components";
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../src/theme';
class _App extends App {
componentDidMount() {
// 서버사이드에서 삽입한 CSS를 제거
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentNode.removeChild(jssStyles);
}
}
render() {
const { Component, pageProps } = this.props;
return (
<>
<Head>
<title>My page</title>
</Head>
<ThemeProvider theme={theme}> // 테마 정보를 Provide
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</>
);
}
}
export default _App;
위의 설정을 모두 마치면 Next JS에서 Material UI와 Styled Component를 사용하실 수 있습니다.
추천 포스팅
아이폰12 플립 가능성, 출시일, 분석 정보
아이폰 12 플립 출시 가능성과 출시일 정보 아이폰12 루머 및 전문 애널리스트 의견 정리 아이폰11이 출시된 지 6개월이 지나고 있습니다. 또, 아이폰 SE2의 출시가 임박한 상태입니다. 이즈음에서 아이폰 사용자..
growd.tistory.com
[Prisma] Prisma(Graphql) 로컬서버 설정 방법(+ docker 설정 방법) - PART 1/2
Prisma를 배울때는 Prisma 공식 홈에서 제공하는 Prisma Cloud를 사용하는것이 간단하고 편리하지만 실제로 개발을 할 때에는 로컬 혹은 자신의 서버에 Prisma 서버를 띄우고 사용해야 합니다. Prisma 공식 문서에..
growd.tistory.com
도움이 되셨다면
공 감 댓 글 구 독 을 정중히 부탁드려봅니다.
:)
'개발과 기술' 카테고리의 다른 글
| [Docker] ports와 expose의 차이 (7) | 2020.05.07 |
|---|---|
| Next JS 프로젝트에 Google Analytics 적용하는 방법 (5) | 2020.04.28 |
| [Python] Python 일정 시간 후 timeout 에러 내는 방법 (5) | 2020.04.14 |
| [Prisma] Prisma(Graphql) 로컬서버 설정 방법(+ docker 설정 방법) - PART 2/2 (0) | 2020.03.31 |
| [Prisma] Prisma(Graphql) 로컬서버 설정 방법(+ docker 설정 방법) - PART 1/2 (0) | 2020.03.31 |
댓글