props 'className' did not match

next.js는 초기 렌더링만 서버가 담당 ( SSR ) 이후 CSR로 동작을 한다.

 

첫 화면 로딩시에는 SSR로 렌더링하면서 오류가 발생하지 않지만, CSR로 렌더링하면서, 서버에서 클래스명과 클라이언트에서 클래스명이 달려져서 생기는 오류이다.

 

 같은 Header를 home 쪽에서 ssr로 렌더링하고 다른 페이지 이동후 새로고침하면 기존에 있는 header( ssr로 내려온 header ) 와 페이지 이동된 후 header (csr로 그려준 header )의 클래스 해쉬 값이 달라 위와 같은 에러

 

해결방법

babel-plugin 설치

npm i babel-plugin-styled-components

 

프로젝트 루트 경로에 .babelrc 파일 생성 이미 존재하면 해당 값 기입

{

   "presets": ["next/babel"],

   "plugins": ["babel-plugin-styled-component"]

}

option

babel-plugin-styled-components에 옵션 주기

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