next/link의 Hydration Error

Link와 anchor는 중첩해서 사용할 때, 발생하는 Hydration Error

const MyComponent = () => {
	return (
      <a>
 	     <Link href="#">Title</Link>
      </a>
    );
}

const MyComponent = () => {
	return (
      <Link href="#">
 	     <a>Title</a>
      </Link>
    );
}

두 경우 전부 Hydration 에러가 발생한다.
styled-components를 사용하는 중이라면, Link 내부의 anchor 태그를 삭제한 뒤에 SEO를 위한 passHref를 사용하자.

> passHref

> Case