[warning] Prop `className` did not match. 원인 및 해결법

# 내용

nextjs 에서 styled-components 사용 중 발생한 오류

내용 그대로 클래스 명이 맞지 않아서 생긴 오류

Warning: Prop `className` did not match. 
Server: "ant-input-group-wrapper ant-input-search ant-input-search-with-button sc-hKwDye jIYbso" 
Client: "ant-input-group-wrapper ant-input-search ant-input-search-with-button sc-gsDKAQ dxgLeb"

 

# 원인 

nextjs 는 최초 렝더링을 서버가 담당함 (SSR) 

> 최초에 서버에서 해시+클래스명으로 생성함

 

이후 클라이언트에서 렌더링 수행함 (CSR)

> 이후 클라이언트 사이드의 해시+클래스명이 달라짐

 

Warning: Prop `className` did not match. 
Server: "ant-input-group-wrapper ant-input-search ant-input-search-with-button sc-hKwDye jIYbso" 
Client: "ant-input-group-wrapper ant-input-search ant-input-search-with-button sc-gsDKAQ dxgLeb"

 

이를 맞춰주는 작업을 babel을 통해 해야함

 

 

# 해결법 

 

1. babel-plugin 설치

npm i -D babel-plugin-styled-component

 

2. 프로젝트 루트 경로에 .babelrc 파일 생성 후 아래 내용 작성

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

• 추가로 babel-plugin-styled-components에 옵션을 줄 수도 있습니다.

{
   "presets": ["next/babel"],
   "plugins": [
      [
        "babel-plugin-styled-components",
        {
           ssr: true, 
           displayName: true,
           preprocess: false
        }
      ]
   ]
}

 

 

 

- 참고 

 

https://velog.io/@hwang-eunji/Styled-components-nextjs%EC%97%90%EC%84%9C-className-%EC%98%A4%EB%A5%98

Styled-components # nextjs에서 className 오류

 

https://donis-note.medium.com/nextjs-styled-components-%EC%A0%81%EC%9A%A9%EC%8B%9C-prop-classname-did-not-match-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-ae71350e9515

[NextJS] styled-components 적용시 Prop `className` did not match. 해결 방법