Next.js: App Router vs Pages Router

Quick Comparison

Pages Router

File-system routing under pages/. Each file = one route. Supports:

• getStaticProps — build-time static generation
• getServerSideProps — per-request SSR
• getStaticPaths — static paths for dynamic routes

Simple and battle-tested. Good fit for smaller apps or migrating legacy projects.

App Router

Routing under app/. Each route is a folder containing a page.tsx. Key additions:

• Nested layouts — layout.tsx wraps all child routes; persists across navigation without remounting
• Server Components — components render on the server by default; add "use client" only where you need interactivity or browser APIs
• Streaming — loading.tsx enables Suspense-based streaming for faster perceived load
• Route Handlers — route.ts files replace pages/api/

Data Fetching in App Router

No more getStaticProps/getServerSideProps. Fetch directly in async server components:

// app/blog/[id]/page.tsx
export default async function BlogPost({ params }: { params: { id: string } }) {
  const post = await fetch(`/api/posts/${params.id}`).then(r => r.json())
  return <article>{post.title}</article>
}

Cache control is via fetch options: { cache: 'force-cache' } (static), { cache: 'no-store' } (dynamic), or { next: { revalidate: 60 } } (ISR).

When to Use Each

Pages Router — maintaining an existing codebase, simple apps, or when dependencies don't yet support Server Components.

App Router — new projects. It's the current standard; the Pages Router is stable but not receiving new features.