05 — App Router vs Pages Router — Two Generations of Next.js Routing

Two routers in one framework is a real source of confusion for anyone arriving fresh, so I mapped the split. The model that clicked: Next.js has two coexisting routers — the Pages Router (the original) and the App Router (the modern, Server-Components-native successor). Both are file-system based, both are supported, but the App Router is where new features land and where the framework's direction points [1][3].

The reason this distinction exists at all is historical. Before Next.js 13, there was only the Pages Router. The App Router arrived as a fundamentally different architecture built on React Server Components, and rather than break every existing project, Next.js kept both. New projects default to App; existing projects migrate incrementally.

Pages Router — the original

The Pages Router is built around the pages/ directory. Every file in pages/ becomes a route based on its filename — pages/about.js becomes /about, pages/blog/[slug].js becomes /blog/:slug [2]. It's simple and battle-tested, and its data-fetching model uses special functions like getServerSideProps and getStaticProps that run only on the server.

// pages/about.tsx — Pages Router
export default function About() {
  return <h1>About</h1>;
}

export async function getServerSideProps() {
  // runs on the server, passes props to the page
  return { props: { data: await fetchData() } };
}

The Pages Router's limits are what motivated the App Router: no native Server Components, data fetching tied to special functions rather than the component tree itself, and layouts bolted on rather than first-class.

App Router — the modern default

The App Router lives in the app/ directory and is built on React's latest features — Server Components, Suspense, and Server Functions [3]. The key shifts from Pages Router:

• Server Components by default. Every component in app/ is a Server Component unless I explicitly mark it 'use client'. Data fetching is just async/await inside the component — no special functions.
• Layouts are first-class. A layout.tsx wraps all pages beneath it and persists across navigation, so shared UI like nav bars doesn't remount.
• Nested routing with colocated concerns. Special files (page.tsx, layout.tsx, loading.tsx, error.tsx, template.tsx) each handle one concern per route segment.
• Streaming built in. Suspense boundaries let the server stream HTML as it becomes ready.

// app/about/page.tsx — App Router
export default async function About() {
  const data = await fetchData(); // just async/await
  return <h1>{data.title}</h1>;
}

Which to use

The official recommendation is unambiguous: for new projects, use the App Router, and for existing Pages Router projects, migrate [1][4]. The App Router is where React's latest features — Server Components, Suspense, Server Actions — actually work. The Pages Router remains supported and even improved, but it's the maintenance path, not the leading edge.

That said, the migration isn't free. The two routers can coexist in one project (an app/ and a pages/ directory side by side), which lets teams migrate route-by-route rather than all at once. The coexistence is intentional — Next.js made it possible to adopt incrementally.

How I use this

Every new project I start uses the App Router exclusively. For any Pages Router code I touch in existing projects, I treat it as legacy-but-stable and migrate opportunistically when the surrounding work justifies it. The decision is rarely about which is "better" in isolation — it's about whether I'm starting fresh (App, always) or working inside an existing commitment (respect the existing router, migrate when sensible).

References

[1] Vercel, "Next.js Docs — App Router and Pages Router," 2024. [Online]. Available: https://nextjs.org/docs#app-router-and-pages-router

[2] Vercel, "Pages Router," Next.js Docs, 2024. [Online]. Available: https://nextjs.org/docs/pages

[3] Vercel, "App Router tutorial," Next.js Docs, 2024. [Online]. Available: https://nextjs.org/learn/dashboard-app

[4] DCS Ink, "Next.js: App Router vs Pages Router," dev.to, 2024. [Online]. Available: https://dev.to/dcs-ink/nextjs-app-router-vs-pages-router-3p57

[5] "Next.js App vs. Pages Router — Which one is better?," YouTube, 2024. [Video]. Available: https://www.youtube.com/watch?v=EYDOXzpTRvw