Next.js의 반응 수화 오류 - "서버 HTML에 <a> 태그와 일치하는 <a> 태그가 포함될 것으로 예상됩니다."

Question

Next.js 프로젝트를 진행 중인데 계속 하이드레이션 오류가 발생합니다. 내가 본 구체적인 오류 메시지는 다음과 같습니다.

오류: 초기 UI가 서버 측에서 렌더링될 때 렌더링되는 것과 일치하지 않아 하이드레이션에 실패했습니다.

경고: 서버 HTML에서 <div> 일치가 필요합니다.

이 문제는 서버 측 렌더링(SSR) HTML과 클라이언트 측의 하이드레이션 중에 React에서 생성된 HTML 간의 불일치로 인한 것일 수 있다는 점을 이해합니다. 경고: 서버 렌더링 HTML에 <div> 태그가 필요했지만 찾을 수 없습니다.

으아아아

NextJS 13에서 이 오류를 어떻게 해결하나요?

Answer 1

이 문제는 Next.js의 구성 요소로 인해 발생합니다. 구성요소를 표준 <a> 태그로 교체하여 문제를 해결했습니다. 으아아아

이 구성 요소처럼 클라이언트 측 탐색을 활성화하는 대신 링크를 클릭하면 전체 페이지를 강제로 새로 고칩니다. 이는 해결 방법이며 페이지 새로고침으로 인해 성능에 영향을 미칠 수 있습니다.