Next.js App Router 시작하기

2024년 2월 1일2분 읽기

App Router란?

Next.js 13부터 도입된 App Router는 app/ 디렉토리를 기반으로 하는 새로운 라우팅 시스템입니다. 기존의 pages/ 디렉토리 대비 많은 장점을 제공합니다.

핵심 특징

1. 서버 컴포넌트

App Router의 컴포넌트는 기본적으로 **React Server Components (RSC)**입니다.

// 이 컴포넌트는 서버에서만 실행됩니다
export default async function PostPage() {
  const posts = await db.posts.findMany();
 
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

클라이언트 컴포넌트가 필요한 경우 "use client" 지시어를 사용합니다.

2. 중첩 레이아웃

app/
├── layout.tsx      # 루트 레이아웃
├── page.tsx        # 홈 페이지
└── posts/
    ├── layout.tsx  # 포스트 공통 레이아웃
    └── [slug]/
        └── page.tsx

3. 정적 생성 (SSG)

generateStaticParams를 사용하여 빌드 시점에 페이지를 생성할 수 있습니다:

export function generateStaticParams() {
  return getAllSlugs().map((slug) => ({ slug }));
}

마이그레이션 팁

Pages Router에서 App Router로 마이그레이션할 때 주의할 점:

getStaticProps → 서버 컴포넌트에서 직접 데이터 페칭
getServerSideProps → 동적 서버 컴포넌트
_app.tsx → app/layout.tsx
_document.tsx → app/layout.tsx의 <html>, <body>

App Router는 러닝 커브가 있지만, 익숙해지면 더 직관적인 개발 경험을 제공합니다.