Warning: Prop `className` did not match. Server: "zzz" Client: "xxx"

className을 쓴적이 없는데 이런 에러가 왜났을까?

괜히 파일에서 className을 열심히 찾았다 .. 🤬

 

저번에 정리한것처럼 

Next.js에서 styled-components를 사용할때 생기는 이슈이다.

 

_document를 따로 생성해 사용할때

Next는 첫페이지를 SSR로 렌더링하고 그 후 클라이언트에서 CSR로 렌더링한다

따라서 이 후 클라이언트에서 작동하는 클래스명이 서로 달라지게 되는것이다.

 

className이 달라지지 않게 하기 위해

 

1. 아래의 명령어를 설치해주고

npm install --save-dev babel-plugin-styled-components

2.

.babelrc파일의 plugins에 설정을 추가한다.

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

 

3. 그리고  terminal종료해주고 다시 시작해주면 된당