Navigate Between Pages

설명

• Link 컴포넌트는 Next.js 앱의 페이지 간에 client-side-navigation을 가능하게 함
• 자바스크립트를 통해서 페이지 전환을 하기 때문에 브라우저 기본 네비게이션보다 빠르다.
• 페이지 이동시에 refresh가 없다.

import

import Link from 'next/link'

생성

• a 태그 대신에 Link 태그를 사용한다.
• a 태그는 Link 태그 안에서 링크를 감싸준다.

<h1 className="title">
  Read{' '} ★ ' ' 빈칸은 a태그와의 띄어쓰기
  <Link href="/posts/first-post"> 
    <a>this page!</a>
  </Link>
</h1>

• 인덱스 페이지로 가는 링크

<div className="container">
  <h1>First Post</h1>
  <Link href="/"> ★ index라고 적을 필요 없다.
    <a>Back to home</a>
  </Link>
</div>

Code Splitting and prefetching

• Next.js는 code splitting을 자동으로 수행한다.
• 그래서 페이지가 render 될 때 필요한 페이지 외에는 초기화 되지 않는다.
• 각 페이지가 isolated 되어있기 때문에 한 페이지에서 오류가 나도 나머지 애플리케이션은 정상작동한다.
• Link 태그로 연결된 페이지는 prefetch 되기 때문에 빠르게 이동할 수 있다.

Note

• 만약 Next.js 앱 외부의 페이지와 연결하고 싶다면 기존의 a 태그를 이동
• a 태그의 className 속성을 이용하고 싶다면 아래와 같이 사용

<Link href="/">
  <a className="foo" target="_blank" rel="noopener noreferrer">
    Hello World
  </a>
</Link>