Nextjs의 Link component

 프로젝트에서 next를 13으로 업그레이드하고 Link 컴포넌트 사용하면서 몇 가지 변경점이 생겼다는 것을 알게 되었다. 근데 아직 app 라우팅 방식으로는 변경 못함ㅠ next13 next config appDir 활성화 + yarn pnp랑 같이 쓰면 빌드에서 실패한다(요 이슈)

 

 이 글에서는 가볍게 기본적으로 알면 좋을 Link 컴포넌트의 속성 및 Next.js12와 13으로 업그레이드되면서 Link 컴포넌트에서 무엇이 변경되었는지 소개해보고자 한다.

 

<Link> 컴포넌트

 Link 컴포넌트는 페이지 간 이동 시 사용된다. Link 컴포넌트의 href 속성에는 이동할 경로를 지정하고, 자식 요소로는 링크의 텍스트 또는 이미지 등을 넣어주면 된다.

import Link from 'next/link';
​
function HomePage() {
  return (
    <div>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  );
}

 

Link component의 prefetch 속성

 prefetch 속성은 Link 컴포넌트가 렌더링될 때 해당 페이지의 데이터를 미리 가져와서 브라우저 캐시에 저장하는 기능을 수행한다. prefetch 속성을 통해서 해당 페이지로 이동하기 전에 필요한 데이터를 미리 가져와서 들고 있게 되고, 이후 페이지 이동 시 페이지 로딩 속도를 향상할 수 있는 이점을 가져갈 수 있다.

 

 기본값으로 true로 설정되어있다. 뷰포트 내에 렌더 되는 <Link>에 대한 페이지에 대한 필요 값들을 다 들고 온다. Link 렌더시 페이지 프리페칭을 원하지 않는다면 false를 주어 prefetch 기능을 끌 수 있다. 이럴 경우 <Link> hover시에 prefetch 결과물을 가져오게 된다.

import Link from 'next/link';
​
function HomePage() {
  return (
    <div>
      <Link href="/about" prefetch={false}>
        <a>About</a>
      </Link>
    </div>
  );
}

 

Link component의 passHref 속성

 passHref 속성을 사용하면, Link 컴포넌트에서 자식 요소로 넘겨지는 href prop을 하위 컴포넌트로 전달할 수 있다. 커스텀 a 컴포넌트를 children으로 넘기고 있는 경우 사용하게 된다. 접근성 및 cmd + click의 사용성을 챙겨갈 수 있다.

import Link from 'next/link';
​
function CustomLink({ children, href }) {
  return (
    <a href={href}>{children}</a>
  );
}
​
function HomePage() {
  return (
    <div>
      <Link href="/about" passHref>
        <CustomLink>About</CustomLink>
      </Link>
    </div>
  );
​

 

Next.js 13 <Link> 변경점

- Link 컴포넌트의 children으로 <a>를 넘겨주지 않아도 된다.

// next12
<Link>
 <a>about</a>  
</Link>
​
// next13
<Link>about</Link>

- Link 컴포넌트에서 scroll prop을 사용할 때, 이제 scroll prop의 값을 숫자로 전달할 수 있다. (이전 버전에서는 scroll prop에 불리언 값만 전달할 수 있었음)

import Link from 'next/link';

function CustomLink(props) {
  return (
    <div>
      {/* 이전 버전 */}
      <Link href="/about" scroll={true}>
        <a>Go to About page (with scroll animation)</a>
      </Link>
      {/* Next.js 13부터 */}
      <Link href="/about" scroll={100}>
        <a>Go to About page (with scroll animation)</a>
      </Link>
    </div>
  );
}

 

 

덧붙여 추가하면 좋을 내용이나 글

- Nextjs에서 페이지 간 이동 방식으로 Link 이외의 방법들을 같이 추가 필요

- 다른 propterty 추가 필요