Next.js App Router 시작하기

Next.js 13부터 도입된 App Router는 React Server Components를 기반으로 한 새로운 라우팅 시스템입니다.

App Router의 특징

1. 파일 기반 라우팅

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

2. 레이아웃 시스템

layout.tsx 파일을 통해 중첩된 레이아웃을 쉽게 구현할 수 있습니다.

3. Server Components

기본적으로 모든 컴포넌트가 Server Component로 동작하여 성능이 향상됩니다.

마무리

App Router는 처음에는 복잡해 보일 수 있지만, 익숙해지면 매우 강력한 기능을 제공합니다.