Next.js App Router의 파일 기반 라우팅을 설명해주세요.

Question

Accepted Answer

App Router는 **`app` 디렉토리의 폴더 구조가 곧 URL 구조**입니다. 폴더가 경로 세그먼트가 되고, 그 안의 **약속된 파일명**이 각자의 역할을 합니다.

### **특수 파일들**

- **page.tsx** — 그 경로의 실제 화면. 이 파일이 있어야 라우트가 됩니다.
- **layout.tsx** — 하위 라우트가 공유하는 레이아웃. 페이지를 이동해도 **리렌더링 없이 유지**되며, 중첩이 가능합니다.
- **loading.tsx** — 자동으로 Suspense 경계가 되어 세그먼트 로딩 중 표시됩니다.
- **error.tsx** — 자동으로 Error Boundary가 되어 세그먼트의 에러를 격리합니다.
- **not-found.tsx** — 404 화면.
- **route.ts** — 화면 대신 API 엔드포인트를 정의합니다.

### **경로 패턴**

- **`[param]`** — 동적 라우트. 예를 들어 `blog/[slug]` 폴더는 `/blog

Next.js

01Next.js App Router의 파일 기반 라우팅을 설명해주세요.쉬움라우팅