Next.js App Router vs Pages Router: Which Should You Use?
Compare folder structure, data fetching, and Server Components. When to choose App Router and when Pages still fits.
Next.js offers two routing models: the older Pages Router and the newer App Router. Here’s how they differ and how to choose.
Next.js routing and project structure
Differences at a glance
Pages Router — pages/ directory, file-based routes, getServerSideProps / getStaticProps, no Server Components.
App Router — app/ directory, layouts per segment, Server Components by default, async server components and fetch on the server.
Data fetching — Pages: getServerSideProps/getStaticProps. App: fetch in server components, or use server actions.
Streaming — App Router supports Suspense and streaming; Pages does not.
Future — New features (Server Actions, partial prerender) are App Router–first; Pages is stable but not where new investment goes.
Adoption of App Router among Next.js projects (survey-style trend):
Next.js projects using App Router (%)
When to use which
Use App Router for new apps, better DX, Server Components, and streaming. Stay on Pages for existing, stable apps unless you’re ready to migrate. Hybrid (both in one app) is possible but adds complexity.
A clear comparison of both routers:
Migration
Moving from Pages to App is a per-route decision: move high-value or new routes first. Use the official migration guide and run both routers during the transition.
