[NextJS] 콘솔 Prop className did not match 오류

 

1.  문제 발생

Styled-components 라이브러리를 이용하여 개발하면 콘솔에 해당 에러가 뜨는 것을 확인할 수 있는데. 

해당 오류는 NextJS 에서 SSR 을 사용했을 때 발생한다.

 

Server Side Rendering 은 서버에서 먼저 랜더링 후 CSR 에서 다시 랜더링을 진행할 때 className 이 맞지 않아 생기는 오류이다.

 

 

 

 

2.  해결 방법

# 라이브러리 설치
npm i babel-plugin-styled-components

해결 방법은 서버와 클라이언트에서 생성하는  className 을 일치 시켜주면 되는데  babel-plugin-styled-components 을 설치하여 적용시켜주면 된다.

 

 

해당 라이브러리는 플러그인이라 적용을 하려면 바벨 설정 파일을 생성해 주어야 한다.

사진과 같이 루트 경로에  .babelrc  폴더를 추가하고 해당 코드를 넣으면 된다.

 

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

 

더 자세한 정보는 Styled-components 공식 홈페이지에서 확인할 수 있다.

 

https://styled-components.com/docs/tooling#serverside-rendering