[Next.js] Route System - 2) next/link - Link

Link

Next.js 에서도 react-router-dom 처럼 next/link 의 link 를 사용할 수 있다.

import Link from 'next/link'
 
function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
      <li>
        <Link href="/blog/item">Blog Post</Link>
      </li>
    </ul>
  )
}
 
export default Home

 

Props

Prop	Example	Type	Required
href	href="/dashboard"	String or Object	Yes
replace	replace={false}	Boolean	-
scroll	scroll={false}	Boolean	-
prefetch	prefetch={false}	Boolean	-

<a> 태그의 속성인 className 이나 target="_blank" 와 같은 것들이 <Link> 속성으로 추가될 수 있으며, 이는 기본적으로 사용되는 <a>요소에 전달된다.

 

• href (required): 이동할 경로 String 값 또는 URL 객체

// string
<Link href="/dashboard">Dashboard</Link>

// 사전 정의된 경로: /about?name=test
<Link
  href={{
    pathname: '/about',
    query: { name: 'test' },
  }}
>
  About
</Link>

// 동적 경로: /blog/my-post
<Link
  href={{
    pathname: '/blog/[slug]',
    query: { slug: 'my-post' },
  }}
>
  Blog Post
</Link>

• replace (Optional): 기본값은 false 이다. true 일 경우, Brower's history stack에서 현재 URL에서 새로운 URL로 교체하게 된다.

<Link href="/dashboard" replace>
	Dashboard
</Link>

• scroll (Optional): 기본값은 true로 페이지 이동 후 상단으로 스크롤한다.
• prefetch (Optional): 기본값은 true로 href 페이지를 백그라운드에 prefetch 한다. 이는 클라이언트 측 탐색 성능을 향상시키는데 유용하다. 뷰포트에 있는 모든 항목이 미리 로드 되며 prefetch={false}을 전달하여 비활성화 할 수 있다. 해당 옵션은 프로덕션에서만 활성화된다.
• passHref (Optional): 기본값은 false 이고, true 일 경우 Link가 href property를 자식에서 전달하도록 강제한다.
• shallow (Optional): 현재 페이지의 경로를 업데이트하되 getStaticProps, getServerSideProps 또는 getInitialProps를 다시 실행하지 않는다. 기본값은 false 이다.
• locale (Optional): 기본적으로 자동으로 locale이 활성화된다. 또한 string 으로 다른 locale 을 제공할 수 있다. false 로 설정할 경우 href 에 locale 을 포함해야 한다.

<Link href="/another" locale="ja">
	<a>To /ja/another</a>
</Link>

---

prefetching

prefetching은 새로운 route 로 교체하기 이전에 백그라운드에서 route를 preload하는 방법이다. prefetched route 의 그려진 결과물은 클라이언트 측 캐시에 저장된다. 이는 prefetched route 로 navigating 하는 것을 near-instant 에 가깝게 만들어준다.

 

기본적으로 route 는 Link component를 사용해 뷰포트에 표시될 때 prefetched 된다.

페이지를 처음 로드하거나 스크롤 할 때 발생할 수 있다. useRouter의 prefetch 메소드를 사용하여 프로그래밍방식으로 루트를 prefetch 할 수도 있다.

 

Static and Dynamic Routes

• route 가 static 이면, route segment에 대한 모든 server component payload가 prefetch 된다.
• route 가 dynamic 이면 첫번재 공유 레이아웃에서 첫번째 loading.js 파일까지의 페이로드가 prefetch 된다. 이렇게 하면 전체 경로를 동적으로 미리 가져오는 비용이 줄어들고 동적 경로에 대한 상태를 즉시 로드할 수 있다.

- prefetching은 오직 production에서만 가능하다.
- prefetching은 Link 컴포넌트에서 비활성화 시킬 수 있다. prefetch={false}