Pages Router vs App Router

Comparisons · Reference cheat sheet

📋 Overview

Next.js Pages Router (pages/) is the original model. App Router (app/) is the modern default with Server Components, nested layouts, and richer caching controls. New projects should prefer App Router unless constrained.

🔧 Core concepts

When to use App Router: new apps, RSC, nested layouts, modern Next features.

When to use Pages Router: large legacy codebases, libraries that assume Pages only, gradual migration.

💡 Examples

Pages:

export async function getServerSideProps() {
  return { props: { t: Date.now() } };
}
export default function Page({ t }: { t: number }) {
  return <p>{t}</p>;
}

App:

export default async function Page() {
  const t = Date.now();
  return <p>{t}</p>;
}

⚠️ Pitfalls

• Mixing both routers works but doubles mental models — document boundaries.
• Hooks require 'use client' in App Router — easy to forget.
• Caching defaults in App Router surprise Pages veterans — learn no-store / revalidate.

🔗 Related

• Next.js/app_router.md
• Next.js/pages_router.md
• Next.js/server_components.md
• README.md