Ch 01. 파일이 곧 주소다 — App Router

지도 없이 길을 만드는 방법

일반적인 웹 프레임워크에서 라우팅을 설정하면 이런 코드를 씁니다.

// Express.js 방식app.get('/about', (req, res) => { ... });app.get('/posts', (req, res) => { ... });app.get('/posts/:slug', (req, res) => { ... });```textURL과 처리 함수를 하나씩 연결하는 방식입니다. 경로가 많아질수록 이 설정 파일이 길어집니다.Next.js App Router는 다르게 생각합니다. 라우팅 설정 파일이 없습니다. 대신, 폴더 구조 자체가 라우팅입니다. `app` 폴더 안에 파일을 만들면, 그 경로가 곧 URL이 됩니다.### 파일 기반 라우팅의 원리`app` 폴더 안에 `page.tsx` 파일을 만드는 것이 핵심입니다. `page.tsx`라는 특별한 파일명이 "이 경로에 페이지가 있다"는 신호입니다.

app/ ├── page.tsx → / ├── about/ │ └── page.tsx → /about └── posts/ ├── page.tsx → /posts └── [slug]/ └── page.tsx → /posts/:slug

파일을 만들면 경로가 생기고, 파일을 지우면 경로가 사라집니다. 별도의 설정이 필요 없습니다.### 각 경로 만들어보기루트 경로 `/`에 해당하는 홈 페이지입니다.```tsx// 파일: app/page.tsxexport default function HomePage() {  return (    <main>      <h1>안녕하세요</h1>      <p>Next.js로 만든 첫 번째 페이지입니다.</p>    </main>  );}```text`/about` 경로는 `app/about/page.tsx` 파일로 만듭니다.```tsx// 파일: app/about/page.tsxexport default function AboutPage() {  return (    <main>      <h1>소개</h1>      <p>저희 서비스에 대해 알아보세요.</p>    </main>  );}```text`/posts` 경로는 `app/posts/page.tsx`입니다.```tsx// 파일: app/posts/page.tsxexport default function PostsPage() {  return (    <main>      <h1>게시글 목록</h1>    </main>  );}

Pages Router와의 차이

Next.js 13 이전에는 pages 폴더를 사용했습니다. Pages Router라고 부릅니다. 지금도 많은 프로젝트에서 사용 중이므로 간략히 비교합니다.

이 책은 App Router를 기준으로 설명합니다. 새 프로젝트라면 App Router를 선택하는 것이 권장됩니다.

다음 챕터에서는

다음 챕터에서는 모든 페이지를 감싸는 틀, layout.tsx를 다룹니다. 공통 헤더와 푸터를 한 번만 만들어 모든 페이지에 적용하는 방법, 그리고 페이지 타이틀을 설정하는 방법을 살펴봅니다.