Next.js의 pages router 와 app router 차이

Next.js의 Router 방식에는 pages router, app router방식이 있다.

두 방식 모두 페이지가 서버에서 렌더링 되고, 파일 기반으로 경로를 설정한다. (=파일기반 라우팅)

 

파일 기반 라우팅의 장점

폴더 이름이 곧 URL 경로가 되므로 직관적이다. (app/about/page.js => /about)

[id].js 처럼 파일이름만으로 동적라우트 간결하게 정의.

 

Pages Router (기존 방식)

• 폴더 구조: pages/ 폴더 내의 파일이 라우팅을 담당
• pages/index.tsx → /, pages/about.tsx → /about
• 레이아웃 재사용 어려움 (_app.tsx, _document.tsx에 모두 몰아서 처리)
• 서버 컴포넌트 없음
• 동적 라우팅 및 중첩 레이아웃 구현이 불편
• 데이터 패칭 방식이 getServerSideProps, getStaticProps, getInitialProps로 분산됨

App Router (Next.js 13+ 부터)

• 폴더 구조: app/ 폴더를 기반으로 구성
• app/page.tsx → /, app/about/page.tsx → /about
• 중첩 레이아웃 지원 (layout.tsx)
• 서버 컴포넌트 React Server Components (RSC) 지원
• 파일 기반 + 컴포넌트 기반 라우팅
• 데이터 패칭 방식 단순화 (서버 컴포넌트 안에서 직접 fetch() 사용 가능)
• loading.tsx, error.tsx, not-found.tsx 같은 UI 상태 관리 파일 사용 가능
• 병렬 라우팅, 모달 라우팅 지원

 

✅ 정리

항목	Pages Router (pages/)	App Router (app/)
라우팅 방식	파일 기반	파일 + 컴포넌트 기반
서버 컴포넌트	❌ 없음	✅ 지원
레이아웃 구조	_app.tsx 하나	중첩 layout.tsx
데이터 패칭	getStaticProps, getServerSideProps 등	서버 컴포넌트 내 fetch
상태 UI 분리	❌ 직접 처리	✅ 파일로 분리 (loading.tsx 등)
학습 곡선	익숙하고 단순	좀 더 복잡함