Skip to main content

Oct 2026 · Comparison · ~8 min read

Next.js App Router vs Pages Router — Which to Use

By Safdar Ali — frontend engineer, Bengaluru

New work I start uses the App Router. I do not rewrite a stable Pages Router app because a blog post said the old router is finished. The choice is about the next feature, not about the history of Next.js.

App RouterPages Router
Where files liveapp/pages/
Shared UINested layouts that do not remount_app plus component composition
DataFetch in Server ComponentsgetServerSideProps / getStaticProps
Client interactivity"use client" on the leaf that needs itThe page is client-capable by default

What I pick

  • A new product or marketing site: App Router, TypeScript, Server Components by default.
  • A Pages app that is fast and understood by the team: leave it. Add a route in pages/ if that is cheaper than a migration.
  • A Pages app whose layout and data fetching are the bottleneck: migrate a section, not the whole tree in one pull request. The steps in the load-time case study are the order I still follow.

Where people get stuck after they choose

The App Router reward is server rendering. The cost is drawing the client boundary in the right place. That is the subject of part 1 and part 2. The beginner path for the file layout is the App Router guide.

If this helped you

I publish free tutorials and write-ups like this in my spare time — no paywall on the guides. If it saved you an afternoon of trial and error, you can support the work:

Related reading

More guides on safdarali.in — same author, production-focused.

"Talk is cheap. Show me the code."