next.js app라우터에서 useId 사용시 발생하는 hydration 에러

Hydration mismatch when using the useId hook, when using the app router

 

app-index.js:31 Warning: Prop `id` did not match. Server: "select-box-:Rmdlll6cq:" Client: "select-box-:R2pmmmkpj9:"

 

https://github.com/vercel/next.js/issues/53110 

 

위 게시물에 자세하게 나와있었다.

 

요약하자면 next에 여러 PR이 합쳐지면서 ReactDevOverlay가 여러 개 생겼고, 서로 다른 React 트리를 생성하여 useId 차이가 발생하고 있다는 것이었다.

 

next를 최신버전으로 업그레이드하자 위 에러로그는 더 이상 발생하지 않았다.

 

 

yarn berry를 사용하면서 기존 yarn classic과 달라진 명령어가 매번 헷갈렸는데 아래 링크에 자세하게 나와있었다.

https://yarnpkg.com/cli/up 

 

특정 dependencies를 업그레이드를 하는 명령어가 yarn upgrade에서 up으로 바뀌었다는 사실을 알게 되었다.

 

yarn up next -i

 

-i를 붙일 경우 대화형 cli로 좀 더 디테일한 수정이 가능했다.

 

 

next가 app router로 바뀌면서 아직 버그가 존재하는 것 같다. stable 되었다고 안심하지 말고, next의 이슈인지 계속 의심해 봐야겠다.