[NEXT.JS] Warning : Props 'className' did not match와 suppressHydarationWarning

 

 

 이런 에러가 발생했다. 위 에러는 처음 페이지 SSR로 내려준 이후 CSR로 화면을 렌더링하게 되는데,

이때 서버에서 받은 해시 + 클래스명과 이후 클라이언트에서 작동하는 해시 + 클래스 명이 달라지면서 스타일을 불러올 수 없는 문제를 발생한다.

 

 구글링 해보니까 보통 styled component에서 많이 발생하는 에러인 것 같다. 그러나 나는 tailwind를 사용하고 있었다.

에러를 자세히 보니 dark가 있었고 이것은 다크모드 설정에서 발생된 에러같았다.

 

 나의 다크모드에는 세가지 종류가 있는데 Light, Dark, System 이 있는데. 서버에서는 localStorage에 저장된 나의 테마상태를 모르기때문에 발생되는 에러다.

 

리액트 공식문서에 있는 suppressHydrationWarning으로 해결하였다.

 

 

 

 

https://ko.legacy.reactjs.org/docs/dom-elements.html

DOM 엘리먼트 – React

https://stackoverflow.com/questions/76185225/warning-prop-classname-did-not-match-while-setting-up-a-theme-provider-in-n

"Warning: Prop `className` did not match" while setting up a theme provider in Next.js