App Router란?
Next.js 13부터 도입된 App Router는 React Server Components(RSC)를 기반으로 동작합니다. 기존 Pages Router와 병행 사용이 가능하지만, 새 프로젝트라면 App Router를 쓰는 게 권장됩니다.
핵심 개념
1. Server Component vs Client Component
App Router에서 모든 컴포넌트는 기본적으로 Server Component입니다. 'use client' 지시어를 추가해야만 Client Component가 됩니다.
// 서버 컴포넌트 (기본값)
export default function Page() {
return <h1>서버에서 렌더링</h1>;
}
// 클라이언트 컴포넌트
"use client";
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
2. 레이아웃 중첩
layout.tsx 파일을 통해 레이아웃을 중첩할 수 있습니다. 부모 레이아웃은 자식 페이지가 바뀌어도 리렌더링되지 않아 성능이 좋습니다.
3. 데이터 페칭
Pages Router의 getServerSideProps 대신, 서버 컴포넌트 내에서 직접 async/await를 사용합니다.
export default async function PostPage({ params }) {
const { slug } = await params;
const post = await fetchPost(slug);
return <article>{post.content}</article>;
}
마이그레이션 시 주의점
useRouter는next/navigation에서 import해야 합니다searchParams는 Promise 타입이므로 반드시await해야 합니다getStaticProps/getServerSideProps는 사용 불가
전환 초기엔 헷갈리는 부분이 많지만, 익숙해지면 훨씬 직관적입니다.