Next.js에서 경로간을 탐색하는 방법에는 두 가지가 있습니다.

• <Link> 컴포넌트 사용
• useRouter hook 사용

이 페이지에서는 <Link>, useRouter()를 사용하는 방법을 살펴보고 네비게이션이 작동하는 방식에 대해 자세히 알아볼 것입니다.

<Link> 컴포넌트

<Link> 는 HTML <a> 태그를 확장하여 경로 간 프리페칭 및 클라이언트 사이드 탐색을 제공하는 기본 제공 컴포넌트입니다. Next.js에서 경로 간을 탐색하는 주요 방법입니다.

next/link 에서 컴포넌트를 가져와서 컴포넌트에 href prop을 전달하면 사용할 수 있습니다.

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

<Link> 에 전달할 수 있는 다른 선택적 prop도 있습니다. 자세한 내용은 API 레퍼런스를 참조하세요.

예제

동적 세그먼트에 링크하기

동적 세그먼트에 링크할 때 템플릿 리터럴 및 보간을 사용하여 링크 목록을 생성할 수 있습니다. 예를 들어 블로그 글 목록을 생성할 수 있습니다.

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>
  )
}