[next 오류] Link Component , a 태그 오류 해결 : Unhandled Runtime ErrorError: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

에러로그

Unhandled Runtime ErrorError: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

 

 

해결방법

 

1. legacyBehavior 속성 사용

: <Link> 컴포넌트에 legacyBehavior 속성을 추가하여 이전 방식으로 사용 

 <Link href="#home" legacyBehavior> <a>Home</a> </Link>

 

2. 직접 스타일링하기
: <Link> 컴포넌트 안에 <a> 태그를 사용하지 않고, **className**을 이용해 직접 스타일링 

 <Link href="#home"> <span className="cursor-pointer">Home</span> </Link>

이러한 변경사항은 Next.js의 최신 버전에서 새로운 링크 동작을 표준화하기 위한 것이므로,
위와 같은 방법으로 코드를 수정하면 된다. 

 

나는 1번을 사용해서 Link, 앵커태그 모두 작동하도록 설정하였다.