What is the difference between the Pages Router and App Router in Next.js?
Why Interviewers Ask This
This is a classic screening question for Next.js roles. Hiring managers ask it early in interviews to gauge your baseline understanding and determine if you can communicate technical concepts clearly.
Answer
Next.js has two routing systems: Pages Router (Next.js <13, legacy): files in the pages/ directory become routes. pages/index.js → /; pages/about.js → /about; pages/users/[id].js → /users/123. Features: getServerSideProps (SSR), getStaticProps (SSG), getStaticPaths (static paths for dynamic routes), API routes in pages/api/. All components are React Client Components by default. App Router (Next.js 13+, recommended): files in the app/ directory. Each folder represents a route segment. Special files: page.tsx (route UI), layout.tsx (shared layout), loading.tsx (loading UI), error.tsx (error UI), not-found.tsx. All components are React Server Components by default (zero client-side JS). Uses React 18 features: Server Components, Streaming, Suspense. Data fetching happens directly in components with async/await. More powerful and flexible. Key differences: App Router supports Server Components (Pages Router doesn't); App Router uses layouts (Pages Router uses _app.js); App Router fetches data differently (async components vs getServerSideProps); App Router supports React 18 Suspense streaming. Migrate from Pages Router to App Router progressively — they can coexist.
Pro Tip
Before answering, structure your response: one-line definition → real-world analogy → concrete example from a project. This makes even complex Next.js answers easy to follow.