[NextJS] error - Hydration failed because the initial UI does not match what was rendered on the server.

NextJS 개발 도중 어느 순간 다음과 같은 경고 문구가 생겼다.

 

Hydrate란?

Hydrate는 Server Side에서 렌더링 된 정적 페이지와 번들링된 JS 파일을 클라이언트로 보낸 뒤, 클라이언트 단에서 HTML 코드와 React JS코드를 서로 매칭 시키는 과정을 말함

 

NextJS 공식문서에서 찾아보니 내 경우는 HTML 규칙을 잘 못지킨 초보적인 실수였다.

https://nextjs.org/docs/messages/react-hydration-error

react-hydration-error | Next.js

NextJs에서 hydration-error를 처리하는 예시를 알려주는 페이지다.

여기서 두번째 예시를 보면 html p태그 내부 div태그를 작성할 경우 에러를 유발할 수 있다고 한다.

<p className="flex gap-1 items-center text-xs sm:text-sm md:text-md lg:text-lg xl:text:xl font-bold shrink-0">
  <div>
    <BsFillCheckCircleFill />
  </div>
  <span>기술 스택: React, React-Query, Context-API</span>
</p>
<p className="flex gap-1 items-center text-xs sm:text-sm md:text-md lg:text-lg xl:text:xl font-bold shrink-0 mt-2">
  <div>
    <BsFillCheckCircleFill />
  </div>
  <span>배포 : versel</span>
</p>

내가 작성한 코드도 p태그 내부에 React-icon을 div태그로 감싸서 발생한 에러였다.

<p className="flex gap-1 items-center text-xs sm:text-sm md:text-md lg:text-lg xl:text:xl font-bold shrink-0">
  <span>
    <BsFillCheckCircleFill />
  </span>
  <span>기술 스택: React, React-Query, Context-API</span>
</p>
<p className="flex gap-1 items-center text-xs sm:text-sm md:text-md lg:text-lg xl:text:xl font-bold shrink-0 mt-2">
  <span>
    <BsFillCheckCircleFill />
  </span>
  <span>배포 : versel</span>
</p>

다음과 같이 수정 후 에러 해결됨.