Next.js에서 layout.tsx의 return에 다음을 입력하면 Hydration failed because the initial UI does not match what was rendered on the server. 가 발생했다.
...
return (
<html lang="en">
<nav>NavBar</nav>
<body className={inter.className}>{children}</body>
</html>
);내 의도는 전역에 NavBar를 보여주는 것을 테스팅함이었는데, 이런 에러가 나오자 조금 당황했다.
그래서 찾아본 결과 다음 페이지에서 정보를 얻을 수 있었다.
https://nextjs.org/docs/messages/react-hydration-error
Common causes에서 Incorrect nesting of HTML tags를 발견하고 내 코드를 확인해 본 결과 역시나 바보같이 body태그 밖에다가 <nav>태그를 쓰고 있었다! 다시 body태그 안으로 집어넣으니 에러메세지가 말끔히 사라졌다.
Fullstack Developer, I post about HTML, CSS(SASS, LESS), JavaScript, React, Next, TypeScript.
공감하며 읽었습니다. 좋은 글 감사드립니다.