Next.js 초보자 가이드 : 라우팅 개념 정리

Next.js에서는 기본적으로 파일 기반 라우팅 시스템을 사용합니다.
이번 글에서는 정적 라우팅, 동적 라우팅, API 라우트, 커스텀 404 페이지까지
Next.js의 라우팅 개념을 설명하겠습니다.

✅ Next.js 라우팅 개요

Next.js의 라우팅 방식은 크게 다음과 같이 나뉩니다.

정적 라우팅 (Static Routing)

정적 라우팅은 pages/ 폴더 내에 파일을 생성하면 자동으로 URL이 생성되는 방식입니다.

📌 예제: pages/about.js 만들기

export default function About() {
  return (
    <div>
      <h1>About 페이지</h1>
      <p>이곳은 About 페이지입니다.</p>
    </div>
  );
}

브라우저에서 /about URL에 접속하면 해당 컴포넌트가 렌더링됩니다.

중첩 라우팅 (Nested Routing)

폴더를 활용하면 계층 구조의 URL을 쉽게 만들 수 있습니다.
📌 예제: pages/products/shoes.js 만들기

export default function Shoes() {
  return <h1>신발 카테고리</h1>;
}

/products/shoes URL에서 해당 페이지가 렌더링됩니다.

동적 라우팅 (Dynamic Routing)

반응형

동적 라우팅을 사용하면 URL의 특정 부분을 변수처럼 사용할 수 있습니다.

📌 예제: pages/blog/[id].js 만들기

import { useRouter } from 'next/router';

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

  return (
    <div>
      <h1>블로그 글 ID: {id}</h1>
      <p>이 페이지는 {id}번 블로그 글입니다.</p>
    </div>
  );
}

브라우저에서 /blog/1, /blog/2 등의 URL에 접속하면 id 값이 동적으로 변경됩니다.

다중 동적 라우팅 (Catch-all Routing

[...params].js 형식으로 파일을 만들면 여러 개의 동적 파라미터를 받을 수 있습니다.

📌 예제: pages/docs/[...slug].js 만들기

import { useRouter } from 'next/router';

export default function Docs() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>문서 페이지</h1>
      <p>경로: {JSON.stringify(slug)}</p>
    </div>
  );
}

브라우저에서 /docs/react/hooks로 접속하면 slug 값은 ["react", "hooks"]가 됩니다.

API 라우트 (API Routes)

pages/api/ 폴더에 파일을 생성하면 자동으로 API 엔드포인트가 됩니다.

📌 예제: pages/api/hello.js 만들기

export default function handler(req, res) {
  res.status(200).json({ message: "Hello, Next.js API!" });
}

브라우저에서 /api/hello에 접속하면 JSON 응답을 받습니다.

커스텀 404 페이지

Next.js에서는 pages/404.js 파일을 만들면 기본 404 페이지를 커스텀할 수 있습니다.

📌 예제: pages/404.js 만들기

export default function Custom404() {
  return (
    <div style={{ textAlign: "center", padding: "50px" }}>
      <h1>404 - 페이지를 찾을 수 없습니다.</h1>
      <p>이런! 요청하신 페이지가 존재하지 않습니다.</p>
    </div>
  );
}

존재하지 않는 페이지에 접속하면 이 404 페이지가 표시됩니다.

링크 사용법 (next/link)

Next.js에서는 next/link를 사용해 클라이언트 측 라우팅을 최적화할 수 있습니다.

📌 예제: 페이지 간 이동 버튼 만들기

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>홈 페이지</h1>
      <Link href="/about">
        <button>About 페이지로 이동</button>
      </Link>
    </div>
  );
}

버튼을 클릭하면 /about 페이지로 이동합니다.

이상으로 라우팅 개념 글을 마치겠습니다.

Next.js 초보자 따라하기 보러가기!!
감사 인사는 구독과 좋아요