Next.js에 styled-components 적용하기

-

Next.js에서 styled-components를 작성해도 ssr시 제대로 적용되지 않는 문제가 발생하였다.

이를 해결하기위해서 몇가지 설정이 필요하다.


1. babel 설정

Next.js는 첫 방문한 최초 페이지를 ssr방식으로 렌더링하고 이후에 페이지 내부에서 라우팅을 통해 다른 페이지로 이동하게되면 csr방식을 이용하게 된다.

이때 서버에서 생성하는 해시값과 브라우저에서 생성하는 해시값이 서로 달라서 문제가 발생하게 된다.



이를 해결하기위해서 바벨 플러그인 패키지를 설치한다.

$ npm i -D babel-plugin-styled-components


바벨 플러그인을 설치한 뒤 root 디렉토리에  .babelrc 파일을 생성하고 아래 코드를 작성한다.

{
"presets": ["next/babel"],
"plugins": [
[
"babel-plugin-styled-components",
{
"ssr": true,
}
]
]
}


공식문서 참고

https://github.com/vercel/next.js/blob/master/examples/with-styled-components/.babelrc



2. _document.js 설정

pages 폴더안에 _document.js 파일을 생성한다. 

ssr시에 실행되는 파일인 _documents.js에 styled-compoents의 스타일 코드를 추출하는 로직을 작성한다.


공식문서 참고

https://github.com/vercel/next.js/tree/master/examples/with-styled-components

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;

try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
// eslint-disable-next-line react/jsx-props-no-spreading
sheet.collectStyles(<App {...props} />),
});

const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}

render() {
return (
<Html>
<Head />
<body>
<Main />
{/* IE에서 돌아가도록 하기위해서 해당 사이트에서 script 가져오기 https://polyfill.io/v3/url-builder/ */}
<script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019" />

<NextScript />
</body>
</Html>
);
}
}




댓글

댓글 쓰기