[NextJS / 오류] NextJS에서 Prop `className` did not match 경고 해결 방법

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

 

* SSR / CSR 이란?

2022.10.11 - [React] - [NextJS] Pre-Rendering, Client-Side-Rendering, Server-Side-Rendering 개념

 

 

---

1. babel-plugin-styled-components 라이브러리 설치

환경에 따라 달라지는 className을 일관되게 해준다.

npm add -D babel-plugin-styled-components

 

 

---

2. root경로에. babelrc파일 생성

.babelrc 파일 생성

( .babelrc 파일)

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

 

2-1) 기타 옵션

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