[Next.js] styled-componets 관련 이슈 : "Warning: Prop `className` did not match."

1. SSR, CSR 컴포넌트의 클래스명 불일치 문제

트위터 클론 코딩인 NodeBird 프로젝트 작업 중에 [그림 1]과 같은 문제를 만나게 되었다. 스타일 관련된 문제라 프로그램이 실행되지 않는 심각한 문제는 아니지만 최초 페이지 로드 시 붉은색 점선으로 표시된 부분에 스타일이 적용되지 않는 문제가 있었다.

[그림 1] Warning: Prop `className` did not match.

 

콘솔에 찍힌 경고 메시지는 다음과 같다.

client.js:1 Warning: Prop `className` did not match. Server: "ant-input-group-wrapper ant-input-search ant-input-search-with-button sc-jSwlEQ ehJBhf css-dev-only-do-not-override-byeoj0" Client: "ant-input-group-wrapper ant-input-search ant-input-search-with-button sc-dkjKgF dPwiqy css-dev-only-do-not-override-byeoj0"

 

이러한 문제가 발생하는 이유는 Next.js가 SSR과 CSR을 동시에 지원하기 때문인데, Next.js에서는 첫 페이지가 SSR로 로드되는데 이때 서버에서 생성된 컴포넌트의 클래스명이 이후에 CSR로 클라이언트에서 생성되는 컴포넌트의 클래스명과 서로 달라서 발생하는 문제이다.

 

2. next.config.js에 속성 추가로 해결

styled-components를 사용하고 있었는데 next.config.js파일을 프로젝트의 최상위 폴더에 생성하고 다음과 같이 코드를 작성하여 이 문제를 해결할 수 있었다(Next.js 12 버전 이상).

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

module.exports = nextConfig;

 

참고 내용
https://tesseractjh.tistory.com/164