페이지 간 링크 생성

Next.js에서 페이지 간 이동은 Link 컴포넌트를 통해 이루어집니다. 이 컴포넌트는 클라이언트 사이드 라우팅을 제공하여 페이지 전환을 빠르고 부드럽게 만듭니다. 이 절에서는 Link 컴포넌트의 사용법과 그 이점에 대해 알아보겠습니다.

Link 컴포넌트 기본 사용법

Link 컴포넌트는 next/link에서 import하여 사용합니다. 기본적인 사용법은 다음과 같습니다.

import Link from 'next/link';
 
export default function Navigation() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/contact">Contact</Link>
    </nav>
  );
}

이 예제에서 각 Link 컴포넌트는 사용자를 다른 페이지로 이동시킵니다.

동적 라우트에서의 Link 사용

동적 라우트에서 Link를 사용할 때는 URL을 동적으로 생성할 수 있습니다.

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

이 예제에서는 각 블로그 포스트에 대한 링크를 동적으로 생성합니다.

Prefetching

Link 컴포넌트의 주요 이점 중 하나는 자동 prefetching입니다.

기본적으로 Next.js는 뷰포트에 있는 모든 Link 컴포넌트의 대상 페이지를 prefetch합니다. 이는 다음과 같은 이점을 제공합니다.

더 빠른 페이지 전환: 사용자가 링크를 클릭하기 전에 이미 페이지 콘텐츠가 로드되어 있습니다.
향상된 사용자 경험: 페이지 전환이 거의 즉각적으로 이루어집니다.

Prefetching은 프로덕션 빌드에서만 작동하며, 개발 모드에서는 비활성화되어 있습니다.

prefetching을 비활성화하려면 다음과 같이 할 수 있습니다.

<Link href="/about" prefetch={false}>
  About
</Link>

외부 링크 처리

Link 컴포넌트는 내부 라우팅을 위한 것입니다. 외부 링크의 경우 일반 <a> 태그를 사용해야 합니다.

<a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">
  Next.js 공식 사이트
</a>

8장 상태 관리 및 폼 처리와의 연결

Link 컴포넌트를 통한 페이지 간 이동은 8장에서 다루는 상태 관리 및 폼 처리와 밀접하게 연관됩니다. 페이지 이동 시 상태를 유지하거나 전달해야 하는 경우, URL 쿼리 파라미터나 상태 관리 라이브러리를 활용할 수 있습니다. 또한, 폼 제출 후 다른 페이지로 리디렉션하는 경우에도 Link 컴포넌트의 개념을 활용하게 됩니다.

실습 : 다양한 유형의 링크를 포함하는 네비게이션 메뉴 만들기

다음 요구사항을 만족하는 네비게이션 메뉴를 만들어보세요.

홈페이지로 이동하는 링크
"About" 페이지로 이동하는 링크
동적 라우트를 사용하는 블로그 포스트 링크 (예 : /blog/1, /blog/2)
외부 웹사이트로 이동하는 링크

import Link from 'next/link';
 
export default function Navigation() {
  const blogPosts = [
    { id: 1, title: "First Post" },
    { id: 2, title: "Second Post" }
  ];
 
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/about">About</Link>
        </li>
        {blogPosts.map((post) => (
          <li key={post.id}>
            <Link href={`/blog/${post.id}`}>
              {post.title}
            </Link>
          </li>
        ))}
        <li>
          <a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">
            Next.js Docs
          </a>
        </li>
      </ul>
    </nav>
  );
}

이 실습을 통해 정적 링크, 동적 링크, 그리고 외부 링크를 모두 포함하는 네비게이션 메뉴를 만들 수 있습니다.

이는 실제 웹 애플리케이션에서 흔히 볼 수 있는 구조로, Next.js의 Link 컴포넌트 사용법을 실전에서 익히는 데 도움이 될 것입니다.

레이아웃 컴포넌트 사용하기 동적 라우트 생성