3. Next.js와 styled-components

---

🤔 뭐가 문제지…?

그냥 생각 없이 “잘 적용되겠지?” 하고 CRA에서와 같이 평소대로 styled-components를 사용했다.
근데, 내가 적용한 CSS가 적용되지 않는 문제가 발생했다…

분명 이렇게 떠야 하는데…

이렇게 아래와 같이 CSS가 적용되지 않은 상태의 raw 버튼이 렌더링 되는 것이었다.

분명 뭔가 SSR 방식에 의한 문제일 것이라는 생각이 들었다…

Next.js는 SSR 방식을 따르기 때문에 서버에서 HTML을 미리 그린 뒤, 뷰에 띄워준다. 따라서 pre-rendering 과정에서 styled-components가 적용되지 않는 문제라고 생각했다.

즉, styled-components가 적용되기도 전에 컴포넌트가 렌더링 되는 것이 문제라고 본 것이다.

---

💊 해결 방법

---

babel-plugin-styled-components 설치

$ npm install --save-dev babel-plugin-styled-components

babel 파일 생성해주기

최상단 루트(root 디렉토리)에 .babelrc 파일을 생성해준다.

그리고 아래의 코드를 입력해주면 된다!

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

_document.tsx 파일 생성

pages 아래에 _document.ts 파일을 생성해준다.

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

export default class MyDocument 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()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

여기까지 해주면 렌더링 시에도 styled-components가 잘 적용되어 뷰에 나타나게 된다 🙂

---