안녕하세요!
Justee에 오신 걸 환영합니다.
오늘은 'Page Router와 App Router가 궁금해질 때'에 대해 이야기해 볼게요.
목차
- Next.js 라우팅 시스템 개요
- Page Router와 App Router 차이점
- 언제 사용하면 좋을까?(Page Router와 App Router)
- 마이그레이션 고려사항
- 마무리하며: 결론 및 정리
1. Next.js 라우팅 시스템 개요
Next.js는 2가지 라우팅 시스템을 제공합니다.
- Page Router: /pages 디렉토리 기반 라우팅
- App Router: /app 디렉토리 기반 라우팅
Next.js v13.4부터 App Router(/app 폴더 기반, 이하 생략)이 도입되었으며, 기존 Page Router(/pages 폴더 기반, 이하 생략)와는 여러가지 차이점이 있습니다. 이 글에서는 두 방식의 차이점을 정리하고 어떤 경우에 각각을 사용하는것이 좋은지 살펴보려고 합니다.
2. Page Router와 App Router 차이점
| 구분 | Page Router | App Router |
| 라우팅 방식 | 파일 시스템 기반으로 /pages 디렉토리 내부 파일명 자동 매핑 | 폴더 및 파일 기반 |
| 동적 라우팅 | [id].tsx 구조 사용 | [id]/page.tsx 구조 사용 |
| 레이아웃 구성 | _app.tsx, _document.tsx 활용 | layout.tsx 기반, 중첩 레이아웃 지원 |
| 서버 컴포넌트 지원 | X (모든 컴포넌트가 클라이언트에서 렌더링) | O (기본적으로 서버 컴포넌트 사용) |
| 데이터 패칭 | getStaticProps, getServerSideProps 사용 | |
| SEO 설정 | next/head 사용 | metadata 객체 활용 |
| API 라우트 | /pages/api/에서 API 정의 | /app/api/에서 API 정의 가능 |
| 성능 최적화 | 클라이언트 렌더링 중심, 최적화 어려움 | 서버 컴포넌트 활용으로 성능 최적화 |
3. Page Router vs App Router 언제 사용하면 좋을까?
| 구분 | Page Router | App Router |
| 기존 프로젝트 유지보수 | O | |
| 새로운 프로젝트 | X | O (권장) |
| 중첩 레이아웃 필요 | X (지원 안됨) | O |
| SEO 및 성능 최적화 | 제한적 | 최적화 |
| 서버 컴포넌트 활용 | X (클라이언트에서 실행) | O (서버에서 직접 렌더링됨) |
4. 마이그레이션 고려 사항
Page Router → App Router로 전환할 경우, 다음 사항을 고려해야 합니다.
- _app.tsx, _document.tsx 제거 후 layout.tsx 활용.
- pages/api 구조를 app/api로 변경하여 API 통합 관리.
- 클라이언트에서만 동작해야 하는 컴포넌트에 'use client' 추가.
5. 결론 및 정리
- 기존 Page Router 방식은 유지보수가 쉽지만, 성능 최적화가 제한적입니다.
- App Router 방식은 서버 컴포넌트 기반으로 더 나은 성능과 유연성을 제공합니다.
- 새로운 프로젝트라면 App Router를 추천합니다.
- Next v14부터 App Router가 기본값으로 설정된 만큼, 점진적으로 마이그레이션을 고려해볼 필요가 있습니다.
참조
- https://nextjs.org/docs/pages/building-your-application/rendering
- https://nextjs.org/docs/app
- https://nextjs.org/docs/pages/building-your-application/routing
끝까지 읽어주셔서 감사합니다!
이번 글이 도움이 되셨길 바라며, 궁금한 점이나 잘못된 부분이 있다면 언제든 댓글로 남겨주세요.
그럼 다음 글에서 또 뵙겠습니다!
반응형