[Next.js] Styled-component에러 Warning: Prop className did not match

 

 

Next 공부를 하는 도중 콘솔 창에 엄청 길게 Warning: Prop className did not match 관련 에러가 발생했다

Next에서 styled-component를 사용하기 위해선 몇 가지 설정이 필요하다고 한다.

첫 페이지 로딩 시에는 별 문제없지만 새로고침 이후에 발생한 문제였다

이유인즉슨, Next.js의 경우 첫 페이지는 SSR, 그 이후에는 내부 라우팅을 통해 CSR을 하게 된다.

이때 서버와 클라이언트에서 생성하는 해시값, 클래스명이 달라지면서 생기는 콘솔 창 에러였다

 

여러 글을 찾아보니 바벨 플러그인 설정으로 해결이 가능한 문제였다

 

npm i -D babel-plugin-styled-components

 

터미널에 바벨 플러그인을 설치 후,

 

프로젝트의 루트에 .babelrc 파일을 새롭게 추가해준다.

그리고 파일 안에

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

위의 코드를 붙여 넣어주자!



 

 

만약 여기까지 진행했는데도 해결이 안 된다면

 

똑같이 루트 경로에

_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()
    }
  }
}

https://github.com/vercel/next.js/blob/master/examples/with-styled-components/pages/_document.js

 

 

를 넣어주면 해결이 될 것이다