Next.js의 라우팅 시스템은 어떻게 동작하나요?

Next.js는 파일(폴더) 기반 라우팅을 씁니다. 별도 설정 파일 없이 폴더 구조가 그대로 URL 경로가 됩니다. (앱 라우터 기준)

폴더 = 경로

app/ 아래 폴더가 경로 세그먼트가 되고, 그 안의 page.tsx가 실제 페이지가 됩니다.

app/
  page.tsx          → /
  about/page.tsx    → /about
  blog/page.tsx     → /blog

동적 경로

대괄호 폴더로 동적 세그먼트를 만듭니다.

• [id] — 단일 동적 세그먼트 (/blog/[id] → /blog/1)
• [...slug] — 캐치올 (여러 세그먼트)
• [[...slug]] — 옵셔널 캐치올

// app/blog/[id]/page.tsx
export default function Post({ params }) {
  return <h1>글 {params.id}</h1>;
}

중첩 레이아웃과 특수 파일

• layout.tsx — 하위 경로가 공유하는 레이아웃(이동해도 유지, 상태 보존)
• loading.tsx / error.tsx / not-found.tsx — 로딩·에러·404 UI
• 폴더명을 (group)으로 감싸면 URL에 영향 없이 그룹핑만 합니다.

클라이언트 내비게이션

next/link의 <Link>로 이동하면 풀 리로드 없이 필요한 부분만 가져와 전환합니다(프리페치 포함). 코드에서 이동할 땐 useRouter().push()를 씁니다.

import Link from 'next/link';
<Link href="/about">소개</Link>;