Next.Js Hydration failed Error

새로운 프로젝트를 만들기 위해 next.js를 이용해 초기 셋팅중에 Hydration Error를 마주했다.

Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error

 

layout(navbar, footer) 를 모든 페이지에서 보여주되, 로그인페이지에서는 로그인 페이지만 보여줄 수 있도록 하기위해

그룹라우터를 이용했고, 그룹라우터 안에서 page와 layout을 만들어주었다.

 

❓Hydration error가 발생한 이유

최상단 layout에 html과 body가 있기 때문에 그룹라우터 내부에 있는 layout에서는 html과 body를 제거해야했으나,

복사해 붙여넣으면서 html과 body안에 또다른 html과 body가 존재하여 문제가 발생되었다.

 

💡해결 방법

그룹라우터 내부에 있는 layout에서 html과 body를 제거해주면 된다!