Next.js에서는 루트 간에 이동하는 네 가지 방법이 있다.

1. <Link> 컴포넌트 사용
2. useRouter hook 사용 (클라이언트 컴포넌트)
3. redirect 함수 사용 (서버 컴포넌트)
4. 네이티브 History API 사용

<Link> Component

<Link>는 HTML <a> 태그를 확장하여 라우트 간의 프리페칭(prefetching) 및 클라이언트 측 네비게이션을 제공하는 내장 컴포넌트 이다. Next.js에서 라우트 간에 이동하는 주요하고 권장되는 방법이다.

next/link 에서 import 하여 href prop을 컴포넌트에 전달하여 사용할 수 있다.

import Link from 'next/link'
 
export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

<Link>에 전달할 수 있는 다른 선택적 props도 있다. → 자세히

Examples1 : Linking to Dynamic Segments

동적 세그먼트로 링크할 때, 템플릿 리터럴(template literals)과 보간(interpolation)을 사용하여 링크 목록을 생성할 수 있다. 예를 들어, 블로그 게시물 목록을 생성하려면 아래의 예시와 같다.

import Link from 'next/link'
 
export default function PostList({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}