4. 네비게이션하기 

일반적으로 사용자는 URL을 직접 수정하여 페이지를 이동하지 않기 때문에

사용자가 마우스 클릭과 같은 이벤트를 활용하여 한 페이지에서 다른 페이지로 이동하기 위해서는 별도의 탐색(Navigating) 버튼 UI가 제공되어야함

이러한 탐색 버튼은 <Link /> 컴포넌트를 통해 적용할 수 있음

1-1. <Link /> 컴포넌트

<Link />는 Next.js에서 제공하는 내장 컴포넌트로, <a> 태그를 확장하여 구현되어 있음

따라서 클라이언트 사이드에서 라우팅을 수행할 때 사용되며, prefetching  기능을 제공함

이러한 <Link /> 컴포넌트는 next/link에서 import하여 사용할 수 있으며, href attribute에 이동할 페이지 경로를 작성하면 됨

import Link from 'next/link'
 
function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
    </ul>
  )
}
 
export default Home

<Link /> 내 herf attribute로 작성된 각 경로들은 아래의 폴더 경로에 작성된 파일들로 라우팅됨

1. / → app/page.jsx
2. /about → app/about/page.jsx

2. 동적 라우팅에 대한 <Link /> 작성 방법

Backtick 기호 ` 를 활용하여 아래와 같이 동적 라우팅(Dynamic Routing) 경로를 적용할 수 있음

다음은 props를 통해 전달받은 posts 목록(배열 데이터)을 활용하여 각 블로그 포스트별로 동적 라우팅을 처리하는 예시

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