Prop `className` did not match.

 

className이 달라서 생기는 경고,

 

첫 페이지는 SSR로 작동하며 이후 CSR로 화면을 렌더링하게 되는데, 이때 서버에서 받은 해시+클래스명과 이후 클라이언트에서 작동하는 해시+클래스 명이 달라지면서 스타일을 불러올수 없는 문제가 발생한다.

 

 

해결 방법

1. 바벨 플러그인 설치

npm i babel-plugin-styled-components

2. .babelrc 파일 생성 후 작성 

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

 

 

 

 

출처

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. 해결 방법

 

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 오류