Prop `className` did not match

주로 next.js 프레임워크를 사용하다가 만나게 되는 에러이다.

ssr의 특성상 초기 렌더링은 서버측에서  하게 되는데 그때, styled-components에서 만들어주는 className과 클라이언트 측에서 만들어주는 className과 다르기 때문에 나타나는 이슈이다.

해결방법

1. babe-plugin-styled-components를 설치한다.

npm i babel-plugin-styled-components

 

2. 프로젝트의 루트에 .babelrc 파일을 만들고 설치한 플러그인을 설정한다.

{
  "plugins": ["babel-plugin-styled-components"]
}

 

3. 클라이언트 서버를 재실행한다.

아래 코드는 babe-plugin-styled-components의 소스코드이다.

https://github.com/styled-components/babel-plugin-styled-components/blob/96f11eb28422526ec227dc2ba6f857d3df7c3d3a/src/visitors/displayNameAndId.js#L130

GitHub - styled-components/babel-plugin-styled-components: Improve the debugging experience and add server-side rendering suppor