Pages Router vs App Router

Definition

The architectural differences between the legacy Next.js routing system (`pages/`) and the modern routing system (`app/`).

Explain Like I'm New

Pages router: Fetched data at the page level using weird Next.js specific functions like `getServerSideProps`. App router: Uses standard async/await directly inside React components, and leverages React Server Components.

Real World Example

Migrating an old Next.js 12 blog to Next.js 14, changing `export async function getStaticProps` into standard `const data = await fetch()` inside the component.

Common Use Cases

•Legacy code migration
•Understanding Next.js history

Interactive Example

/* ❌ OLD WAY: Pages Router (pages/users.tsx) */
export default function Users({ users }) {
  return <div>{users.map(u => <p>{u.name}</p>)}</div>
}

// Special framework-specific function to fetch data
export async function getServerSideProps() {
  const res = await fetch('https://api/users')
  const users = await res.json()
  return { props: { users } }
}

/* ✅ NEW WAY: App Router (app/users/page.tsx) */
// Standard async React component! No special functions needed.
export default async function Users() {
  const res = await fetch('https://api/users')
  const users = await res.json()
  
  return <div>{users.map(u => <p>{u.name}</p>)}</div>
}

Interview Questions

basic

Which router is the recommended, modern way to build Next.js applications?

intermediate

Can you use the `pages` and `app` router in the same project?

Flash Cards

Question

Which is recommended?

Click to reveal answer

Answer

The App Router (`app/` directory).

Question

Use both simultaneously?

Click to reveal answer

Answer

Yes! Next.js supports incremental adoption. You can have both directories running at the same time, allowing you to migrate an enterprise app one page at a time.