Next.js App Router vs Pages Router: What Changed and Why

The App Router is the future of Next.js — but the Pages Router is not dead. Compare data fetching, layouts, streaming and when to stay on the old model.

Web development workspace with code

Next.js introduced the App Router to modernize the framework around React Server Components, streaming and nested layouts. The Pages Router remains supported, but new features land in the App Router first.

The decision is mostly about what you are starting from. New projects should use the App Router; existing Pages Router apps can migrate gradually or stay put.

What the App Router changes

The mental model shifted from files-as-routes to directories-as-routes, and from client rendering to server-first rendering.

  • Server Components render on the server by default, cutting bundle size.
  • Nested layouts persist across navigation without re-rendering.
  • Streaming lets you send content before the data is ready.
  • Data fetching lives next to components, not in special functions.

What stays the same

If you already know the Pages Router, much transfers: file-based routing, API routes (now route handlers), and the same static-generation concepts under new names.

How to choose

New project: App Router, no question. Large existing app that works: stay on Pages Router until a migration adds clear value. The framework supports both for a reason.

Next.js router FAQ

Will the Pages Router be removed?

There is no removal date. It remains supported, but investment and new features concentrate on the App Router.

Should I migrate an existing app?

Only if you need the new capabilities — server components, streaming, parallel routes — or if the Pages Router blocks a feature. Migrations have real cost.