Next.js App Router vs Pages Router

Two Routing Systems

Next.js has two routers: the older Pages Router (pages/) and the newer App Router (app/, introduced in Next 13). New projects should use the App Router.

Key Differences

Feature	Pages Router	App Router
Folder	pages/	app/
Components	Client by default	Server by default
Data fetching	getServerSideProps	async components + fetch
Layouts	Manual	Nested layout.tsx
Loading UI	Manual	loading.tsx

Data Fetching Comparison

// Pages Router
export async function getServerSideProps() {
  const data = await fetch("...").then(r => r.json());
  return { props: { data } };
}

// App Router — just await in the component
export default async function Page() {
  const data = await fetch("...").then(r => r.json());
  return <div>{data.title}</div>;
}

Server vs Client Components

// Server Component (default) — runs on server, no JS shipped
export default async function Page() { ... }

// Client Component — needs interactivity/hooks
"use client";
export default function Counter() { const [n] = useState(0); ... }

FAQs

Can I use both routers together?

Yes, during migration. But pick the App Router for new features.

Is the Pages Router deprecated?

Not deprecated, but the App Router is the future and gets new features first. More in our Next.js section.