Next.js) styled-components 리렌더 시, 적용안되는 문제 해결방법

문제발생 및 원인

Next.js 프로젝트로 styled-components를 사용 시, 리렌더나 새로고침을 하면 적용이 풀리는(?) 이슈가 있었다.

원인은 초기에 렌더링 될 때 SSR로 렌더링되어서 발생하는 문제라고 한다.

따라서 몇가지 설정을 해줘야 하는데...

.babelrc styled-components 플러그인 설정

아래의 .babelrc 플러그인 설정은 문제 해결방법과 무관하게, styled-components 설치 후 해야하는 설정을 제가 까먹고 설정을 안했던 부분이라 일단 기록했습니다.. 🥲 (이 부분은 무시하고 해결방법부터 보세요!!)

"plugins": [
  [
    "styled-components",
    {
      "ssr": true,
      "displayName": true,
      "preprocess": false
    }
  ]
]

해결방법

page/_document.tsx 파일을 새롭게 추가해 준다.

🙋🏻‍♂️ _document.tsx파일은 SSR렌더링 할 때만 호출된다!!

_document.tsx

import Document, { DocumentContext } from "next/document";
import { ServerStyleSheet } from "styled-components";

class CustomDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    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()}
          </>
        ),
      };
    } catch (error) {
      throw error;
    } finally {
      sheet.seal();
    }
  }
}

export default CustomDocument;

다음과 같이 파일 안에 해당 내용을 넣어서 저장하면 끝!