[error] Nextjs 에서 warning: prop `classname` did not match 에러가 나올때

Nextjs에서 StyleComponets를 사용하면 뜨곤하는 에러라고한다

 

서버와 클라이언트의 클래스명이 다른 것이 원인이다.

 

Next.js는 첫 페이지 로드가 SSR로 동작하기 때문에, 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라지게 된다.

이렇게 환경에 따라 달라지는 className을 일관되게 해주는 것이 바로 babel-plugin-styled-components이다.

 

yarn add -D babel-plugin-styled-components

 

설치후 .babelrc 작성

 

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