App Router vs Pages Router in Next.js: Key Differences and Usage

The App Router in Next.js uses a new folder-based system with React Server Components and supports nested layouts, while the Pages Router uses a file-based system with client-side navigation and traditional data fetching. App Router is recommended for new projects for better flexibility and performance.

Quick Comparison

This table summarizes the main differences between the App Router and Pages Router in Next.js.

Feature	App Router	Pages Router
Routing Style	Folder-based with app/ directory	File-based with pages/ directory
React Support	Supports React Server Components by default	Uses React Client Components only
Layouts	Nested layouts with shared UI possible	No built-in nested layouts, only _app.js for global layout
Data Fetching	Uses async server components and fetch with caching	Uses getStaticProps, getServerSideProps, or client fetching
Navigation	Supports streaming and partial rendering	Client-side navigation with next/link (no full page reloads)
Recommended For	New projects needing modern React features	Existing projects or simple apps

Key Differences

The App Router introduces a new way to organize routes using the app/ folder. It leverages React Server Components, allowing parts of the UI to render on the server asynchronously. This improves performance and reduces client-side JavaScript. Nested layouts are a big feature here, letting you share UI like headers or sidebars across multiple pages easily.

In contrast, the Pages Router uses the traditional pages/ folder where each file corresponds to a route. It relies on React Client Components and uses special functions like getStaticProps or getServerSideProps for data fetching. Layouts are global via _app.js and cannot be nested per route.

Navigation in the App Router supports streaming and partial updates, making transitions smoother. The Pages Router uses client-side navigation with next/link but does not support streaming. Overall, the App Router is designed for modern React apps with better performance and flexibility, while the Pages Router is simpler and more familiar for existing projects.

Code Comparison

Here is how you create a simple page that fetches and displays data using the Pages Router.

javascript

import React from 'react';

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const post = await res.json();
  return { props: { post } };
}

export default function Post({ post }) {
  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </main>
  );
}

Output

<h1>sunt aut facere repellat provident occaecati excepturi optio reprehenderit</h1><p>quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto</p>

App Router Equivalent

Here is the same page using the App Router with a server component and async data fetching.

javascript

export default async function Post() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1', { cache: 'no-store' });
  const post = await res.json();

  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </main>
  );
}

Output

<h1>sunt aut facere repellat provident occaecati excepturi optio reprehenderit</h1><p>quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto</p>

When to Use Which

Choose the App Router when starting a new Next.js project that benefits from React Server Components, nested layouts, and modern data fetching. It offers better performance and flexibility for complex apps.

Choose the Pages Router if you maintain an existing project or need simpler routing without adopting new React features. It is stable and familiar for many developers.

Key Takeaways

App Router uses the new app/ folder with React Server Components and nested layouts.

Pages Router uses the traditional pages/ folder with client components and special data fetching methods.

App Router supports streaming and partial rendering for smoother navigation.

Use App Router for new projects needing modern React features and better performance.

Use Pages Router for existing projects or simpler routing needs.