What are the main differences between the App Router and the Pages Router?
Assesses fundamental understanding of Next.js conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
The Pages Router uses files under pages/. Each file exports a default component, data comes from getStaticProps, getServerSideProps or getStaticPaths, and _app and _document customise the shell.
The App Router uses folders under app/ with page.tsx, layout.tsx, loading.tsx and error.tsx, and is built on React Server Components. Key differences: nested layouts preserve state across navigation, fetching happens directly in async server components with automatic request memoisation, streaming with Suspense is first-class, and client components are opt-in with "use client". Route handlers replace API routes.
The App Router is the recommended default for new projects; the Pages Router remains supported and many existing apps use it. You can run both in one project during migration, but a page and an App Router route cannot share the same path. Choose the App Router for new work unless a dependency still assumes the Pages conventions.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.