Next.jsInterview preparation
Intermediate·Concept·2 min read

App Router vs Pages Router?

Practice this question

Definition:

Next.js provides two routing systems: the Pages Router organizes page files, while the App Router uses nested route segments, layouts and React Server Components. They have different data-fetching and rendering conventions. Knowing which router a project uses prevents mixing APIs and assumptions from different architectures.

Key points:

  • App Router uses the app directory, nested layouts and Server Components.

  • Pages Router uses the pages directory and page-based rendering APIs.

  • Check which router and Next.js version the project uses before discussing caching behavior.

  • Server and client boundaries are a central App Router concept; route code must follow the conventions of its actual directory.

Interview point:

  • State the router and version before explaining framework-specific caching or rendering behavior.
Adapted from 06_REACT_NEXTJS.md · “App Router vs Pages Router?”. Code examples are study fragments. Difficulty and core labels are editorial estimates; version-specific behavior should be checked against your project.