Warning : Props 'className' did not match client: server:

 

리액트에서는 전혀 말썽이 없던 styled-component가 말썽을 부렸다.

 

Next는 서버에서 한번, 클라이언트에서 한번 총 두번 렌더링하게 되는데 이때 styled-component에 의해 랜덤으로 생성되는 클래스명이 일치하지 않아서 생기는 문제이다.

 

구글링을 통해 쉽게 해결할 수 있었다.

 

npm i babel-plugin-styled-components

바벨 플러그인을 설치하고 바벨설정을 추가함으로 해결할 수 있다.

 

.babelrc 설정

최상단 디렉토리에 .babelrc 를 추가하고 다음과 같이 작성

{
  "presets": ["next/babel"],
  "plugins": [
  	["babel-plugin-styled-components", 
    	{ "fileName": true, "displayName": true, "pure": true }
    ]
   	]
}

바벨 플러그인 설정은 0번째 인덱스에는 플러그인 명(babel-plugin-styled-components), 1번째 인덱스에는 옵션을 작성한다.

 

babel-plugin-styled-components 플러그인의 옵션

• fileName : 코드가 포함된 파일명을 알려줌
• displayName : 클래스명에 해당 스타일 정보 추가
• pure : 사용하지 않은 속성 제거

---

사실 이 경고는 전통적인 버그이고 개발 모드에서만 문제가 된다고 한다. 실제 배포시에는 문제 없다고 함.

---

참고자료

https://sangmin802.github.io/Study/Framework/next.js%20style%20error/

https://velog.io/@hwang-eunji/Styled-components-nextjs%EC%97%90%EC%84%9C-className-%EC%98%A4%EB%A5%98