[에러] Nextjs Link a child

옥수수의 코딩이야기·2023년 2월 5일
0

에러

목록 보기
8/18
post-thumbnail

문제: Error: Invlid <Link> with <a>child. Please remove <a> or usr <Link legacyBehavior> 발생
해결방안: npx @next/codemod new-link

<Link>사용법에 자동 업그레이드
<Link><a id="link">Home<a></Link><Link id="link">Home</Link>로 바뀝니다.
Link 태그에 legacyBehavior를 추가

참고자료

<a>태그의 href로 이동하면 상태 값을 잃고 속도가 저하된다.
반면에, Link 컴포넌트는 HTML5 History API를 사용하여 브라우저의 주소만 바꿀 뿐, 페이지를 새로 불러오지는 않는다. 따라서 리엑트에서는 Link 컴포넌트 사용을 권장한다.

참고
해결방안) https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor
a태그와 Link) https://gomgomkim.tistory.com/9

profile
프론트엔드 공부중 기억은 블로그가 대신합니다.

0개의 댓글