Next.js에서 Prop `className` did not match 경고 발생 시 에러 해결 방법

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

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

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

next.js 12 버전 이전 사용시

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

next.js 12 버전 이후부터는 next.config.js에서 styledComponents 관련 옵션을 적용하면 됩니다.

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

export default nextConfig;

출처
https://tesseractjh.tistory.com/164