[Next] 04. Page Router 라우팅 규칙

 

Next.js에서 pages/ 폴더는 곧 URL 경로입니다.
파일명이나 폴더명에 따라 자동으로 라우팅이 구성되고, 동적 페이지도 파일명만으로 쉽게 만들 수 있습니다.
여기선 Page Router 기준으로 동작 방식을 정리합니다. (⚠️ App Router 아님)

pages/
  index.tsx        →  /
  about.tsx        →  /about
  contact.tsx      →  /contact
  blog/index.tsx   →  /blog
  blog/post.tsx    →  /blog/post

폴더/파일 구조 = URL 구조
React 컴포넌트를 해당 위치에 넣으면 자동으로 라우팅됩니다.

 

🔁 동적 라우팅 (Dynamic Routes)

[] — 단일 동적 세그먼트

pages/
  post/
    [id].tsx     →  /post/1, /post/hello

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

export default function Post() {
  const { id } = useRouter().query;
  return <h1>Post ID: {id}</h1>;
}

 

[...param] — Catch-all (모든 경로를 배열로 수집)

pages/
  docs/
    [...slug].tsx    →  /docs/a, /docs/a/b/c

// docs/[...slug].tsx
import { useRouter } from "next/router";

export default function Docs() {
  const { slug } = useRouter().query;
  return <p>{JSON.stringify(slug)}</p>;  // ["a", "b", "c"]
}

 

[[...param]] — Optional Catch-all (경로 없어도 됨)

pages/
  help/
    [[...slug]].tsx   →  /help, /help/a/b

// help/[[...slug]].tsx
import { useRouter } from "next/router";

export default function Help() {
  const { slug } = useRouter().query;
  return <p>{slug ? slug.join(" > ") : "Help 메인 페이지"}</p>;
}

 

index.tsx	pages/index.tsx	/
about.tsx	pages/about.tsx	/about
[id].tsx	pages/post/[id].tsx	/post/123
[...slug].tsx	pages/docs/[...slug].tsx	/docs/a/b/c
[[...slug]].tsx	pages/help/[[...slug]].tsx	/help, /help/a/b
_app.tsx	pages/_app.tsx	전역 App 설정
_document.tsx	pages/_document.tsx	HTML 문서 커스터마이징
(group)	❌ Page Router에서 사용 금지