Next.js App Router 이해하기
Next.js 13에서 도입된 App Router의 핵심 개념과 사용법을 알아봅니다.
App Router란?
Next.js 13에서 도입된 App Router는 React Server Components를 기반으로 한 새로운 라우팅 시스템입니다.
주요 특징
- Server Components: 기본적으로 모든 컴포넌트가 서버 컴포넌트
- Layouts: 중첩 레이아웃 지원
- Loading UI: 스트리밍과 Suspense 지원
- Error Handling: 에러 바운더리 내장
파일 규칙
App Router에서 사용하는 특별한 파일들:
app/
├── layout.tsx # 레이아웃
├── page.tsx # 페이지
├── loading.tsx # 로딩 UI
├── error.tsx # 에러 UI
└── not-found.tsx # 404 UI
Server vs Client Components
Server Component (기본)
// 별도 지시자 없이 기본값
async function Page() {
const data = await fetchData();
return <div>{data}</div>;
}Client Component
'use client';
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}데이터 페칭
App Router에서는 async/await를 직접 컴포넌트에서 사용할 수 있습니다:
async function PostPage({ params }) {
const post = await getPost(params.id);
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
);
}마무리
App Router는 React의 최신 기능들을 활용하여 더 나은 개발 경험과 성능을 제공합니다.