Link 컴포넌트

파일 구조

app/linking/
├── page.tsx       → /linking (현재 페이지)
└── blog/
    ├── page.tsx   → /linking/blog
    └── ...

블로그 포스트 목록 (Link 사용)

hover 시 prefetch가 시작되고, 클릭 시 client-side 전환이 일어납니다.

• Hello World

  /blog/hello-world

• Getting Started with Next.js

  /blog/getting-started

• Deep Dive into Routing

  /blog/deep-dive

핵심 코드

import Link from 'next/link'

export default async function Post({ post }) {
  const posts = await getPosts()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  )
}