NextJS Prop `className` did not match 이슈

원인

styled-components모듈을 사용 할 때 서버에서 생성된 className과 클라이언트에서 생성된 className이 서로 다른 것 때문에 뜨는 이슈이다.

콘솔 결과

해결 방법1 (NextJS 13버전 미만)

yarn add -D babel-plugin-styled-components

/.babelrc

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "displayName": true,  // 클래스명에 컴포넌트 이름을 붙임
        "pure": true,  // 사용되지 않는 속성 제거
        "ssr": true  // SSR을 위한 설정
      }
    ]
  ]
}

해결 방법2 (NextJS 13버전 이상)

/next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    styledComponents: {
      ssr: true
    },
  },
};

module.exports = nextConfig;