[Next.js] 라우팅(feat. Link 태그)

기존 라우팅 방식

기존에는 페이지에서 페이지로 이동을 하기 위해서 a 태그를 사용해 이동을 했습니다.

<nav>
    <a href='/'>Home</a>
    <a href='/about'></a>
</nav>

 

구현 화면

실제 화면에서 클릭을 해 다른 페이지로 이동을 하면 상단 로고가 새로고침 되는 것을 확인할 수 있습니다.

 

 

그렇다면 Next.js에서는?

 

하지만 Next.js에서는 a 태그를 사용해 페이지 간 이동을 구현하게 되면 다음과 같이 eslint 오류가 납니다.

 

 

Do not use an <a> element to navigate to /. Use <Link /> from next/link instead.

 

즉 <a> 태그 대신 <Link /> 태그를 사용하라는 것입니다.

 

 

사용법

 

<Link /> 안에 프로퍼티를 작성해주면 됩니다. 따라서 <Link /> 태그를 사용한 코드는 다음과 같습니다.

 

export default function NavBar() {
  return (
    <nav>
      <Link href='/'>Home</Link>
      <Link href='/about'>About</Link>
    </nav>
  );
}

 

기존 Next.js는 <Link /> 내부에 <a> 태그를 넣어 작성했지만 13버전부터는 <a> 태그를 작성하지 않습니다.

만약 <a>태그를 사용해서 구현할 경우엔느 <Link legacyBehavior/> 와 같이 <Link /> 태그 내부에 legacyBehavior 옵션을 사용해주면 됩니다.

[관련 Next.js 문서]

invalid-new-link-with-extra-anchor | Next.js

invalid-new-link-with-extra-anchor | Next.js

 

구현 화면

아까와는 다르게 새로고침하지 않는 것을 볼 수 있습니다.

---

참고

next/link | Next.js

next/link | Next.js