CodePark/ questions / App vs Pages Router
START PRACTICINGPRACTICE
Frontend question · Next.js › App vs Pages Router

What are the main differences between the App Router and the Pages Router?

The Pages Router loads data per page with special functions. The App Router is built on React Server Components, where any component can fetch data.

Pages Router (pages/):

  • Each file maps to a route.
  • Components are client components that are also server-rendered.
  • Data loads through page-level functions like getServerSideProps and getStaticProps.
  • Shared UI goes in _app and _document.

App Router (app/):

  • It is built on React Server Components.
  • Components are Server Components by default and can fetch data directly, at any level of the tree.
  • It adds nested layouts that stay mounted across navigation.
  • It adds streaming with Suspense, plus loading and error files.
  • It adds Server Actions, the Metadata API and fine-grained caching.

The App Router is the recommended choice for new projects. The Pages Router is still supported. Both can live in one project during a migration.

  • The Pages Router maps one file per route and uses page-level data functions.
  • The App Router uses Server Components by default, which can fetch data anywhere.
  • The App Router adds nested layouts, streaming and Server Actions.
  • The App Router is recommended for new projects.
  • Both routers can coexist during a migration.