Next.js 초기 화면에서 Styled-component 적용되지 않을 때

❓ 문제

Next.js 초기 화면에서 Styled-component가 적용되지 않음

---

❗️ 해결방법

1. babel-plugin-styled-components 을 설치한다.

npm i babel-plugin-styled-components

2. 프로젝트 최상위 경로에 .babelrc와 _document.js 파일을 생성하여 아래와 같이 작성한다.

.babelrc 파일

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

_document.js 파일

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

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

3. .eslintrc.json 파일을 아래와 같이 수정한다.

.eslintrc.json 파일

// .eslintrc.json
{
  "extends": ["next/babel", "next/core-web-vitals"]
}

---

📍 결과

📍 개발 환경

  "dependencies": {
    "babel-plugin-styled-components": "^2.1.4",
    "next": "13.5.4",
    "react": "^18",
    "react-dom": "^18",
    "styled-components": "^6.0.8"
  },