[Next.js] Hydration Error Touble Shooting 기록

 

프로젝트를 세팅하고 센트리를 연결하였더니 발생되는 이슈를 확인할 수 있었다.

Setnry에 Report 된 Hydration failed error

구글링해보니 Hydration failed은 DOM이 생성되기 전에 window로 접근하는 이슈였다.

근데 나는 window로 접근하는 코드가 없었고 라이브러리에서 발생되는 문제라고 예상했다.

그 라이브러리가 무엇인지는 쉽게 알 수 있었다.

 

react-dom 에서 나온다고 하네요

 

너구나?

 

그런데 React-dom을 따로 사용하지 않았고,

CNA에서 dependency한 react-dom 뿐이라 next의 문제라고 확신하고 검색했고 

어렵지 않게 찾을 수 있었다.

https://github.com/vercel/next.js/pull/32619

Upgrade react 18 to rc, drop prerelease warning by huozhi · Pull Request #32619 · vercel/next.js

 

next.js 에서 react@18 사용 시 발생되는 문제고 , fix되어 있어 버전업으로 쉽게 해결할 수 있었다.

next 버전 업

 

그 이후 콘솔에 나오는 warning이나 sentry에 나오는 hydration fail 은 나오지 않았다.

이렇게 트러블 슈팅 완료!