[Next.js] styled-component 적용하기

Next.js에서 styled-component를 사용할 경우 생기는 문제

: Next.js는 SSR(Server Side Rendering)을 이용하여 페이지를 pre-rendering을 하기 때문에 클라이언트가 서버에 페이지 요청 시 HTML/CSS만 넘겨 받는다. / styled-component는 CSS-in-JS 형식으로써 JS로 작성된 스타일 요소들을 페이지에 주입 시킨다.

 

* pre-rendering이란?
: 서버에서 HTML 파일들을 미리 만들어 놓고 클라이언트에서 페이지 요청 시 서버에서 HTML 파일을 넘겨주는 방식

이는 퍼포먼스와 검색 SEO를 향상 시켜준다.

pre-render

 

그렇기 떄문에 Next.js에서 styled-component로 CSS를 작성하면 사용자가 페이지 진입 시 HTML/CSS를 먼저 그린 후에 JS가 그려지기 때문에 스타일이 뒤늦게 적용되는 문제가 발생한다.

 

Next.js에 styled-component 적용하기

[NextJS] styled-components와 함께 사용하기

Next.js 고정 스타일링, styled-components 설치 및 사용법

 

1. babel 설정하기

: Next.js는 페이지 접속 시 SSR(Server Side Rendering)을 이용하고 페이지 이동 시에는 CSR(Client Side Rendering)을 이용하여 페이지를 렌더링 한다.

 

이때 server와 client에서 생성하는 className에 해시값이 달라서 충돌이 발생한다.

* styled-component로 만들어진 컴포넌트는 내부적으로 태그의 className을 해시하여 만들어진다.

 

root 폴더 밑에 .babelrc 폴더를 생성하고 아래 코드를 삽입한다.

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

 

2. _document.js 설정하기

: pages 폴더 안에 _document.js 파일 생성하고 아래 코드를 삽입한다.

import Document from "next/document";
import Script from "next/script";

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) => sheet.collectStyles(<App {...props} />),
                });

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

 

설정 끝!