[Next.js] 라우팅 완전 정복 정적/동적 페이지부터 Link까지

[Next.js] 라우팅 완전 정복 – 정적/동적 페이지부터 Link까지

Next.js는 파일 기반 라우팅을 제공합니다.
pages 폴더 안에 파일을 만들기만 해도 자동으로 URL이 생성되며, 정적, 동적, 중첩 라우팅까지 모두 처리할 수 있습니다.

이번 글에서는 Next.js 라우팅 시스템의 기본 개념과 실전 사용법을 정리합니다.

---

✅ 1. 정적 라우팅

pages/about.tsx 파일을 만들면 /about 경로가 자동 생성됩니다.
파일 구조 = URL 구조라는 점이 Next.js의 핵심입니다.

// pages/about.tsx
export default function About() {
  return <h1>About Page</h1>;
}

위 파일을 만들면 브라우저에서 /about 경로로 접근 가능합니다.

---

✅ 2. 중첩 라우팅

폴더를 이용해 중첩 페이지도 쉽게 만들 수 있습니다.

// pages/products/index.tsx
// pages/products/shoes.tsx

위 구조는 각각 /products, /products/shoes 경로로 연결됩니다.
폴더 구조 그대로 라우팅된다는 점이 직관적이죠.

---

✅ 3. 동적 라우팅 (Dynamic Routes)

대괄호 문법을 사용하면 동적인 경로도 쉽게 만들 수 있습니다.

// pages/post/[id].tsx
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Post ID: {id}</h1>;
}

/post/1 또는 /post/abc처럼 다양한 URL을 처리할 수 있으며,
이 URL의 파라미터는 useRouter() 훅으로 받아옵니다.

---

✅ 4. Link 컴포넌트로 페이지 이동

Next.js의 Link 컴포넌트는 클라이언트 사이드 전환을 지원하여 페이지 이동 속도가 빠릅니다.

import Link from 'next/link';

export default function Home() {
  return (
    <nav>
      <Link href="/about">About으로 이동</Link>
    </nav>
  );
}

일반 <a> 태그 대신 <Link>를 쓰면
전체 페이지 새로고침 없이 이동하므로 성능에 유리합니다.

---

📌 마무리

Next.js의 라우팅은 파일 기반 구조 덕분에 매우 직관적이고 유연합니다.

정적, 중첩, 동적 경로를 모두 지원하며, Link 컴포넌트를 활용하면 사용자 경험도 우수하죠.