[next.js | styled-components] Warning: Prop `className` did not match.

1. 문제 발생

Warning: Prop className did not match.

next.js로 개인 프로젝트를 진행하면서 pagination을 구현하던 중 특정 버튼을 컴포넌트로 만들어 넣어주면서 위와 같은 경고 메세지가 발생했다.

2. 문제 해결

• 경고 메세지를 해석해보면 'className'이라는 props가 매치되지 않는다. 즉, 서버와 클라이언트에서 클래스명이 다르다는 것이다.
  그렇다면 클래스명을 동일하게 만들어 주면 되지 않을까? 생각하며 구글링을 하던 중 나와 같은 문제를 겪은 분의 글을 보고 참고하여 해결했다.
• Next.js는 첫 페이지 로드가 SSR로 동작하기 때문에, 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라지게 된다.

※ Next.js 12버전부터 babel 대신 swc를 사용하여 컴파일하도록 변경되었다

=> next.config.js 파일의 nextConfig 속성으로 compiler: {styledComponents: true}를 추가해준다.

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  swcMinify: true,
  compiler: {
    styledComponents: true,
  },
}

결과적으로 해당 속성을 추가해주면, 서버와 클라이언트 환경에 따라 달라지는 'className' props를 일관되게 해주며, swc(speedy web compiler)를 사용하면서 문제를 해결할 수 있다.

*babel을 사용하고 있는 경우에는 다른 방식으로 문제 해결을 할 수 있다.