App Router vs Pages Router

Next.js currently ships with two different routing systems. The Pages Router, based on a pages/ folder, was the original and only routing system for years, and is still fully supported. The App Router, based on an app/ folder, was introduced as stable in Next.js 13 and has been the actively developed, recommended default ever since, refined through Next.js 14 and 15.

Comparison

Aspect	Pages Router (`pages/`)	App Router (`app/`)
Folder convention	Every file in `pages/` is automatically a route — `pages/about.tsx` becomes `/about`.	A route needs a folder containing a `page.tsx` — `app/about/page.tsx` becomes `/about`.
Component model	Every component is a Client Component; everything ships to and hydrates in the browser.	Components are Server Components by default; opt into Client Components with `"use client"`.
Data fetching	`getServerSideProps`, `getStaticProps`, and `getStaticPaths` — special exported functions per page.	Plain `async` components with `await fetch(...)` directly inside the component itself.
Layouts	Manually composed via a single `_app.tsx` (and `_document.tsx`) wrapping every page the same way.	Nested `layout.tsx` files per folder, automatically composed from the root down to the current route.

What each folder convention looks like

Pages Router — pages/about.tsx

TSX

export default function About() {
  return <h1>About Us</h1>
}

export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/about').then((r) => r.json())
  return { props: { data } }
}

App Router — app/about/page.tsx

TSX

export default async function About() {
  const data = await fetch('https://api.example.com/about').then((r) => r.json())
  return <h1>{data.title}</h1>
}

Note

The App Router is the current recommended default for **new** projects — it is where Next.js's newest features (Server Components, streaming, Server Actions, nested layouts) land first. The Pages Router remains fully supported and is a perfectly valid choice for existing or legacy projects; there is no forced migration deadline. This tutorial series focuses on the App Router throughout.