Next.js 에서 라우트 간에 이동하는 두 가지 방법이 있다.

<Link> 컴포넌트 사용
useRouter() 훅 사용

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

<Link> Component

<Link>는 HTML <a> 태그를 확장하여 라우트 간의 사전 로드 및 클라이언트 측 내비게이션을 제공하는 내장 컴포넌트입니다.

Next.js에서 라우트 간 이동하는 주요 방법입니다. next/link에서 가져와 href 속성을 컴포넌트에 전달하여 사용할 수 있습니다.

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

**<Link>**에 전달할 수 있는 다른 선택적인 속성들이 있습니다. 자세한 내용은 API 참조를 확인해주세요.

Examples

Linking to Dynamic Segments

동적 세그먼트로 링크를 걸 때, 템플릿 리터럴과 보간법(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>
  )
}

Checking Active Links