Next.js 15 App Router 완벽 가이드: 실전 예제로 배우기

App Router가 뭐길래?

Next.js 13부터 도입된 App Router는 React Server Components를 기반으로 하는 새로운 라우팅 시스템입니다. Next.js 15에서 더욱 안정화되었습니다.

주요 변경 사항

1. 폴더 기반 라우팅

app/
├── page.tsx          // 메인 페이지 (/)
├── about/
│   └── page.tsx      // /about
└── blog/
    └── [slug]/
        └── page.tsx  // /blog/[slug]

2. Server Components 기본

모든 컴포넌트는 기본적으로 Server Component입니다. 클라이언트 컴포넌트가 필요할 때만 'use client' 지시어를 추가합니다.

3. 데이터 페칭

getServerSideProps, getStaticProps 대신 async/await를 직접 사용합니다.

결론

App Router는 성능, SEO, 개발 경험 모두 개선되었습니다. 새 프로젝트라면 망설이지 말고 App Router를 선택하세요!