문제 인식

nextjs에서는 다른 페이지로의 이동을 Link 태그를 이용하여 진행하는데,
UI 컴포넌트와 함께 사용하면 UI 컴포넌트가 무시되고 링크로만 표현되거나 hydration 에러가 발생하였다.

해결 방법

<Link href="/new-password" passHref legacyBehavior>
  <Anchor>link text</Anchor>
</Link>

nextjs에서 제공하는 링크태그로 UI 컴포넌트를 감싼 다음, passHref와 legacyBehavior props를 link 태그에서 사용해주어야 한다.

https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-custom-component-that-wraps-an-a-tag