App Router vs Pages Router: Which One to Use in 2026

Next.js ships two routers. The App Router is the modern default, built around React Server Components and the app directory. The Pages Router is the original model, still supported for existing projects, but no longer the recommended starting point.

What separates the two routers

The two routers are different ways of turning files into pages, and they use different files and different mental models. The newer router arrived in Next.js 13 and became the default, while the original one dates back to the earliest framework versions. Both ship in the same framework, and an app can run the two directories side by side during a migration.

The App Router treats every page as a server component by default and runs data fetching inside the component. The Pages Router treats pages as client components and fetches data through separate exported functions. The mental model is the biggest change: a single component that owns its data replaces a page plus a data function.

The same page in each router

In the App Router, a blog page is an async server component:

App.tsx

// app/blog/page.tsx
export default async function BlogPage() {
  const res = await fetch('https://api.vercel.app/blog');
  const posts = await res.json();
  return <ul>{posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
}

The fetch runs on the server during rendering, and the browser receives the finished list. There is no separate function to export and no client fetch hook to write. The async component is the data layer.

In the Pages Router, the equivalent page splits into a component and an exported function:

App.tsx

// pages/blog.tsx
export default function Blog({ posts }) {
  return <ul>{posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
}
export async function getServerSideProps() {
  const res = await fetch('https://api.vercel.app/blog');
  const posts = await res.json();
  return { props: { posts } };
}

Both render the same list. The App Router keeps data fetching inside the component, while the Pages Router hoists it into getServerSideProps. The result in the browser is identical, which is why the choice is about architecture rather than output.

Which one to choose in 2026

Use the App Router for every new project. It is where new React features land, including Server Components, and it is the router the documentation recommends.

The Pages Router still matters when you maintain an existing app. Migration is incremental: you can keep the pages directory, add an app directory, and move routes one section at a time. You do not have to rewrite an old project all at once.

To understand the App Router's folder conventions, read How File-Based Routing Works in the Next.js App Router. If you are moving API endpoints off the Pages Router, see API Routes vs Route Handlers.