Next.js App Router vs Pages Router 비교

 

 

1. Pages Router 개요

Pages Router는 Next.js 1.x부터 존재했던 기존 라우팅 방식입니다. pages/ 디렉토리 안에 파일을 생성하면 그 파일명이 자동으로 라우트가 됩니다.

예를 들어:

pages/
 ┣ index.js         → /
 ┣ about.js         → /about
 ┗ blog/[id].js     → /blog/:id

• 파일 이름 기반 자동 라우팅
• getStaticProps, getServerSideProps 등 데이터 패칭 함수 제공
• Link 컴포넌트를 통한 클라이언트 라우팅 지원

👉 특징: 학습 곡선이 낮고 직관적, 기존 프로젝트에서 많이 사용됨.

---

2. App Router 개요

App Router는 Next.js 13에서 실험적으로 도입되고, 14부터 안정화된 새로운 라우팅 시스템입니다.
app/ 디렉토리 안에서 라우트를 정의하며, React 18의 서버 컴포넌트(Server Components) 개념을 활용합니다.

예시:

app/
 ┣ page.js          → /
 ┣ about/
 ┃  ┗ page.js       → /about
 ┗ blog/
    ┗ [id]/
       ┗ page.js    → /blog/:id

• React Server Component(RSC) 지원
• layout.js를 통한 레이아웃 중첩/공유
• loading.js, error.js, not-found.js 등 라우트 단위 특수 파일 제공
• fetch 내장 서버 캐싱, Streaming & Suspense 지원

👉 특징: 서버 중심 렌더링과 구조화된 라우팅 경험을 제공.

---

3. 주요 차이점 비교

구분 Pages Router App Router

디렉토리	pages/	app/
데이터 패칭	getStaticProps, getServerSideProps, getInitialProps	서버 컴포넌트 안에서 직접 fetch 사용
컴포넌트 종류	기본적으로 클라이언트 컴포넌트	서버 컴포넌트(기본), 필요시 "use client" 선언
레이아웃	_app.js, _document.js 단일 구조	layout.js 중첩 가능 (페이지별 공유 레이아웃 손쉽게 구현)
특수 파일	_app.js, _document.js, _error.js	layout.js, error.js, loading.js, not-found.js
코드 스플리팅	자동 지원	자동 + 서버 컴포넌트 기반 더 정교한 스플리팅
SEO	SSR/SSG 모두 지원	SSR/SSG + 서버 컴포넌트로 더 효율적
학습 난이도	상대적으로 쉬움	초기 진입 장벽 있음

---

4. 예제 비교

Pages Router에서 데이터 패칭

// pages/blog/[id].js
export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/blog/${context.params.id}`);
  const post = await res.json();

  return { props: { post } };
}

export default function BlogPost({ post }) {
  return

{post.title}

;
}

App Router에서 데이터 패칭

// app/blog/[id]/page.js
export default async function BlogPost({ params }) {
  const res = await fetch(`https://api.example.com/blog/${params.id}`, {
    cache: "no-store", // SSR
  });
  const post = await res.json();

  return

{post.title}

;
}

👉 App Router에서는 **서버 컴포넌트 자체에서 fetch**를 직접 호출할 수 있습니다. 별도의 getServerSideProps 없이 깔끔하게 API 호출이 가능하죠.

---

5. 장단점 정리

Pages Router

✅ 장점

• 직관적이고 진입 장벽이 낮음
• 기존 문서/예제/레퍼런스가 풍부
• 빠르게 MVP나 소규모 프로젝트 구축 가능

❌ 단점

• 레이아웃 관리의 유연성이 떨어짐
• 서버 컴포넌트 미지원
• 데이터 패칭 방식이 제약적

App Router

✅ 장점

• 서버 컴포넌트 지원 (더 적은 JS 번들, 성능 향상)
• layout.js를 통한 강력한 레이아웃 구조
• Streaming & Suspense로 빠른 로딩 UX
• 데이터 패칭 단순화 (fetch 내장)

❌ 단점

• 학습 곡선이 상대적으로 높음
• Pages Router 대비 생태계 자료가 아직 부족
• 일부 라이브러리는 호환 이슈 발생 가능

---

6. 어떤 걸 선택해야 할까?

• 신규 프로젝트라면 👉 App Router 권장
  (React 18 기능 활용, 구조화된 개발 경험, 장기적으로 표준)
• 기존 프로젝트 유지/점진적 이전 👉 Pages Router 유지 + 점진적 마이그레이션
  (대규모 서비스라면 한 번에 갈아타는 것보다는 모듈 단위로 이전하는 게 안전)

---

7. 마무리

Next.js는 단순히 React를 SSR/SSG로 감싸주는 프레임워크에서, 이제는 풀스택 웹 애플리케이션 플랫폼으로 진화하고 있습니다.
App Router는 그 중심에 있으며, 앞으로 Next.js의 메인 라우팅 시스템으로 자리 잡을 것이 확실합니다.

따라서 학습 난이도가 조금 높더라도, 장기적으로는 App Router를 익히고 실무에 적용하는 것이 큰 도움이 될 것입니다.
다만 Pages Router 역시 여전히 강력하고 안정적인 선택지이므로, 프로젝트 상황에 맞게 적절히 선택하는 것이 최선입니다.