App Router vs Pages Router

App Router와 Pages Router 선택

App Router는 app/page.tsx, layout.tsx, route.ts와 서버 컴포넌트를 기본으로 삼고, Pages Router는 pages, _app, getServerSideProps, pages/api 같은 기존 규칙을 유지합니다.

Pagespages/[id].tsx, _app
Appapp 폴더와 route segment
Server기본은 Server Component
Migration같은 경로 충돌 방지
01

Pages Router

pages/about.tsx가 /about이 되고, SSR/SSG는 getServerSideProps와 getStaticProps로 분리합니다.

02

App Router

app/dashboard/page.tsx가 공개 라우트이고, layout.tsx, loading.tsx, error.tsx로 segment 단위 UI를 나눕니다.

03

혼합 가능성

app과 pages는 함께 둘 수 있지만 같은 URL을 동시에 소유하면 충돌합니다. 이동 단위를 경로별로 끊습니다.

04

실패 신호

App Router에서 useState, window, 이벤트 핸들러가 필요하면 해당 파일에 'use client' 경계를 둡니다.

전환 전에 확인할 항목

  • App Router의 fetch cache, revalidate, dynamic 렌더링 규칙을 화면별로 문서화합니다.
  • next/router 의존 코드는 App Router에서 next/navigation으로 바꿉니다.
  • pages/api는 유지하거나 app/api/*/route.ts의 Request/Response 핸들러로 옮깁니다.

비교 기준

Routingpage.tsx vs pages/*.tsx
Layoutlayout.tsx vs _app 패턴
Datafetch cache vs get*Props
Client'use client'와 hook 경계