Next.js Developer interview question · Most asked
What are the differences between the App Router and the Pages Router?
Summary
The App Router (app/ directory, stable since Next.js 13.4) is built on React Server Components with nested layouts, streaming, Server Actions and colocated loading/error UI. The Pages Router (pages/) uses getServerSideProps/getStaticProps and client-rendered page components.
Longer Answer
Both can coexist during migration. App Router concepts: layout.tsx (persistent shared UI), page.tsx (route UI), loading.tsx (Suspense fallback), error.tsx (error boundary), route.ts (API handlers), and async Server Components that fetch data directly. Navigation hooks come from next/navigation instead of next/router. New projects should use the App Router.
Key Points
- App Router: RSC, nested layouts, streaming, Server Actions
- Pages Router: getServerSideProps/getStaticProps
- Can coexist for incremental migration
- Different router hooks (
next/navigationvsnext/router)
Comparison / Tradeoffs
| Concept | Pages Router | App Router |
|---|---|---|
| Data fetching | getServerSideProps / getStaticProps | async Server Components, fetch, caching APIs |
| Layouts | _app.tsx, manual | Nested layout.tsx |
| API | pages/api/* | route.ts Route Handlers |
| Mutations | API routes | Server Actions |
More most-asked Next.js Developer questions
- How did caching defaults change in Next.js 15?
- Explain SSR, SSG, ISR and CSR in Next.js.
- How does data fetching work in the App Router?
- What is Next.js and what problems does it solve on top of React?
- What is the difference between Server Components and Client Components?
- Explain the App Router file conventions: page, layout, loading, error, not-found, template and route.
- What happens, step by step, when a request reaches a Next.js App Router application?
- What are Server Actions and how do you use them for mutations?