Next.js Link 오류

nextjs 공부 겸 알고리즘 전용 블로그를 만들어보고자 프로젝트를 하고 있는데,

link 코드를 작성하다가 오류가 나서 기록해본다.

 

 

import Link from "next/link";
import navlinks from "../data/navlinks";

const Nav = () => {
  return (
    <nav>
      {navlinks.map((nav) => (
        <Link href={nav.link} key={nav.title}>
          <a className={`mr-5`}>{nav.title}</a>
        </Link>
      ))}
    </nav>
  );
};

export default Nav;

 

위의 코드가 그 코드인데, npm run dev를 하고 연 순간 오류가 발생했다.

 

 

이런 오류였는데, 처음에는 뭐가 뭔지 몰라 당황했는데 직역해보니 간단했다.

a태그를 지우거나 Link에 legacyBehavior를 넣어주라는 것이었다.

 

그래서 공식 문서를 조금 찾아보니,

next 13 버전 이후로부터는 Link 태그 속에 a 태그 넣지 않아야 정상 작동한다고 한다.

만약 꼭 Link 속에 a 태그를 넣어야 한다 (예시, 이전 버전 코드를 13으로 변경하는데 class 속성 등이 a 태그에 있다) link 에 legacyBehavior 넣으면 해결된다고 했다.

 

legacyBehavior 속성을 사용하면 이전 버전에서 사용하던 대로 속성을 잘 사용할 수 있다고 한다.

 

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

Invalid `<Link>` with `<a>` child

 

위의 공식 문서 링크에도 설명이 다 잘 나와있다.

 

그래서 아래 코드로 수정해주었다.

import Link from "next/link";
import navlinks from "../data/navlinks";

const Nav = () => {
  return (
    <nav>
      {navlinks.map((nav) => (
        <Link href={nav.link} key={nav.title} legacyBehavior>
          <a className={`mr-5`}>{nav.title}</a>
        </Link>
      ))}
    </nav>
  );
};

export default Nav;

 

이런 식으로 수정했더니 제대로 nav가 작동되었다.