Next.js 에서 TypeScript 와 styled-components 함께 쓰기

Next.js 에서 TypeScript 와 styled-components

서버에서의 html 클래스 네임과 클라이언트에서 클래스 네임 병합

• 문제 발생

  1. 페이지에 CSS 적용이 안 됨

  2. console 에 클래스 네임이 맞지 않다고 출력됨

• 원인

  styled-components 공식 문서 참고 (https://styled-components.com/docs/tooling#babel-plugin)[https://styled-components.com/docs/tooling#babel-plugin]

  클라이언트와 서버에서 다른 클래스 생성(class naming)을 하기 때문에 Hydration 과정에서 class name 이 적용되지 않음

• 해결법

  1. babel-plugin-styled-components 의존성 추가

    npm install --save-dev babel-plugin-styled-components
  
    or
  
    yarn add babel-plugin-styled-components -D
  

  1. .babelrc 생성

     루트 폴더에 .babelrc 파일 생성

     아래의 코드 추가

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

     babel 이 클라이언트와 서버에서 다른 클래스 생성(class naming)을 막아주는 코드

  2. _document.tsx 생성

     pages 폴더에 _document.tsx 생성

     Next.js 의 HTML 커스텀 설정 가능

     아래 코드 추가

            ```
     
            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();
               }
     
             }
               }
     
             ```
     

     ServerStyleSheet가 클라이언트와 서버에서 다른 클래스 생성(class naming)을 막아줌