[Next.js] Error: Invalid Link with a child. Please remove a or use Link legacyBehavior 오류

Intro

Next.js를 사용하던 도중 다음과 같은 에러가 발생하였습니다. 

 

Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior> 

 

Why?

<Link href={props.link}>
  <a className={classes.btn}>{props.children}</a>
</Link>

next/link 를 활용하여 Link 태그 안에 a 태그를 넣어줬던 코드에 문제가 있었습니다. 에러 화면에 나와있는 Next.js 사이트에 한번 접속해봤습니다. (https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor)

 

Why This Error Occurred

Next.js 13버전이 나오면서, Link 태그는<a>로 렌더링 되므로 <a>를 사용하는 시도는 유효하지 않다고 하네요!

 

How to solve the problem

npx @next/codemod new-link .

이럴 경우에는 new-link codemod 를 실행하여 이전 버전 Next.js를 <Link> 사용법에 자동 업그레이드 해줘야 합니다. 다음 코드를 실행 시 <Link><a id="link">Home<a></Link> 이 <Link id="link">Home</Link> 로 변경됩니다. 또는 legacyBehavior prop을 추가하여 <Link legacyBehavior><a id="link">Home<a></Link> 다음과 같이 사용할 수도 있습니다. 

 

<Link href={props.link} legacyBehavior>
 <a className={classes.btn}>{props.children}</a>
</Link>

new-link 를 실행한 후, 다음으로 코드를 변경하니 에러 없이 실행이 되었습니다.

 

현재 저는 next.js 를 강의(next version이 13버전 이전)를 보며 공부를 하고 있는데요, 로컬에서 creat next-app 을 사용하여 프로젝트를 생성한 상태로 진행하다보니 버전이 맞지 않아 생긴 문제 같습니다. next.js 가 아주 친절하게 에러의 이유를 알려줘서 고맙네요 👍

 

---

https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor