Warning: Prop `className` did not match. Server: "sc-jrcTuL jZFII" Client: "sc-gswNZR bPbOgX" 오류

Next.js 에서 styled-components 사용할때 위와 같은 오류가 뜬다. 

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

 

className 일관 되게 만들어주기 

1. babel-plugin-styled-components 설치하기 

2. .babelrc 파일 루트에 만들어서 아래 내용 추가하기 

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