[Next.js] App Router와 Pages Router의 특징

요약

Next.js 13에서 도입된 App Router는 기존의 Pages Router와 다른 새로운 라우팅 방식입니다.
App Router는 React의 최신 기능을 활용하여 애플리케이션을 구축할 수 있도록 하며, 라우팅과 레이아웃 경험을 개선합니다.

Pages Router

• 정의: 이전 버전의 Next.js에서 사용되던 라우팅 방식
• 특징:
  • /pages 디렉토리에 페이지 컴포넌트를 배치
  • 파일 이름이 곧 URL 경로가 됨
  • 페이지 간 상태 공유가 어려움
  • 레이아웃 구현이 복잡함

App Router

• 정의: Next.js 13에서 도입된 새로운 라우팅 방식
• 특징:
  • /app 디렉토리에 라우팅 및 레이아웃 구현
  • 컴포넌트 간 상태 공유가 용이
  • 레이아웃 구현이 간단해짐
  • Server Components 아키텍처 지원
  • 스트리밍 및 Suspense 기능 지원
  • 중첩 라우트와 레이아웃 지원
  • 메타데이터 API를 통한 SEO 최적화 지원

App Router의 주요 기능

• Server Components: 서버에서 렌더링되는 컴포넌트로, 클라이언트 측 상태 관리가 필요 없어 성능 향상
• Streaming & Suspense: 부분적인 데이터 로딩을 통해 사용자 경험 개선
• Nested Routes & Layouts: 중첩된 라우트와 레이아웃 구현으로 UI 구조 개선
• Metadata API: 메타데이터 관리를 통한 SEO 최적화

마이그레이션 고려사항

• App Router 방식에는 많은 새로운 키워드와 개념이 도입되어 익숙해지는 데 시간이 소요될 수 있습니다.
• 기존 Pages Router 방식에서 App Router 방식으로 마이그레이션할 때는 라우팅, 레이아웃, API 사용 등 다양한 부분을 고려해야 합니다.

참고 자료

[1] jadru.com - Next.js 13부터의 App Router와 기존 Page Router의 차이 비교 (https://www.jadru.com/diffrent-approuter-and-pagerouter)
[2] GitHub Pages - Next.js 앱 라우터 마이그레이션: 좋은 점, 나쁜 점, 그리고 ... (https://ktseo41.github.io/blog/log/nextjs-app-router-migration-the-good-bad-and-ugly.html)
[3] velog - Next.js App Router - Routing(1) (https://velog.io/@andy99/Next.js-App-Router-Routing1)
[4] timegambit.com - [Next JS] Pages Router 에서 App Router 전환기 | Time Gambit (https://www.timegambit.com/blog/blog-log/app-router)