페이지 간 링크 생성
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) - 외부 웹사이트로 이동하는 링크 (예 : Next.js 공식 사이트)
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 컴포넌트 사용법을 실전에서 익히는 데 도움이 될 것입니다.