Warning: Prop `className` did not match. Server

이런 워닝은 naxt.js 을 쓰면서 한번도 본적이 없었는데 오늘 나왔다 콘솔에 ㅋㅋ

현 플젝이 scss 로 되어있어서 그런가 ;; 그 상태에서  styled-components 를 사용하니 위 같은 워닝이 떴다.

클래스 이름이 일치하지 않다고 한다.

이때는 바벨 플러그인 babel-plugin-styled-components를 다운로드 해 바벨설정을 추가함으로 해결!!

1.yarn  babel-plugin-styled-components

2..babelrc 파일을 만든후 ,

{

"presets": ["next/babel"],

"plugins": [

[

"babel-plugin-styled-components",

{ "fileName": true, "displayName": true, "pure": true }

]

]

}

아래 코드를 추가해주면 완료!

 

추가옵션으로는 { "fileName": true, "displayName": true, "pure": true } 가 있다!

"plugins": [ [ "babel-plugin-styled-components", { "fileName": true, "displayName": true, "pure": true } ] ]

 

* NEXT.js 애서 바벨 설정을 추가할때는 next/bable 프리셋 을 추가하는 것을 잊지 말기!!!! 약속!