What is the difference between the App Router and the Pages Router?

Q: What is the difference between the App Router and the Pages Router?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block names the version it ran on. ## 1. Why This Even Matters — A Story First The Pages Router is a building where every room has its own front door and each room is decorated from scratch. The App Router is a building with shared corridors (layouts) that stay lit while you walk between rooms, rooms that are partly built in the factory (Server Components), and doors that can show you a waiting area while the room finishes (loading). You can keep both buildings on the same street, but walking from

The problem

Question presented to candidate: "Next.js has two routers. What is the difference, which one would you choose for a new project, and can they coexist?"

What a strong answer should cover:

Pages Router (pages/): every file is a route, data via getServerSideProps and getStaticProps, all components are client components that also ship to the browser.
App Router (app/): folders are routes and only page files are public; React Server Components by default; nested layouts, loading and error files, streaming, Server Actions.
The App Router is the recommended choice for new projects; the Pages Router is still supported.
Both can live in one project, which allows incremental migration; navigation between them is a full page load.
Pages Router props are serialized into __NEXT_DATA__; the App Router sends an RSC payload of rendered output.

Clarifying questions expected:

"New project or existing app?" — new projects use the App Router.
"Which libraries depend on next/router or _app?" — they influence the migration order.

Code / implementation expected: Yes — the same page in both routers.

nextjs
app-router
pages-router
routing

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block names the version it ran on.

1. Why This Even Matters — A Story First

The Pages Router is a building where every room has its own front door and each room is decorated from scratch. The App Router is a building with shared corridors (layouts) that stay lit while you walk between rooms, rooms that are partly built in the factory (Server Components), and doors that can show you a waiting area

The solution is hidden so you can try first

5 min read · 8 sections

Read the code

The same product page in both routers

// pages/products/[id].tsx  (Pages Router)
export async function getServerSideProps({ params }: { params: { id: string } }) {
  return { props: { product: await getProduct(params.id) } };
}
export default function Product({ product }: { product: { name: string } }) {
  return <h1>{product.name}</h1>;
}

// app/products/[id]/page.tsx  (App Router)
export default async function Product({ params }: { params: Promise<{ id: string }> }) {
  const product = await getProduct((await params).id);
  return <h1>{product.name}</h1>;
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.