[ 에러 Error ] Next.js에서 Prop `className` did not match.

에러

원인

Next.js는 서버사이드렌더링(SSR )이다.
서버와 클라이언트의 className이 다르다고 에러가 뜬 상황이다.
Next.js는 첫 페이지 로드가 SSR로 동작하기 때문에, 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라지게 된다.

해결

이렇게 next.config.js파일에 styledComponents: true,로 해주면 된다.
Next.js12버전부터 swc를 사용해 컴파일한다.

또는 .babelrc파일에서 설정을 해줘야한다.

/* .babelrc */
{
  "presets": ["next/babel"],
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "ssr": false,
        "displayName": true,
        "preprocess": false
      }
    ]
  ]
}

next.js 공식문서
도움받은 github
도움받은 블로그