NEXT104 - Pages Router vs App Router

Next.js currently supports two routing systems: the Pages Router and the App Router.
This often creates confusion for developers who are new to the framework.
In this lesson, you will learn what each router is, how they differ, and which one you should use.

Why Are There Two Routers?

The Pages Router is the original routing system in Next.js and has been used for many years.
The App Router was introduced later to support modern React features such as Server Components and layouts.

Next.js maintains both systems for backward compatibility.

Pages Router Overview

The Pages Router is based on the pages directory.

Key characteristics:

• Routes are defined in the pages/ folder
• Each file becomes a route
• Uses getStaticProps and getServerSideProps
• Client Components by default

Example structure:

pages/
  index.js
  blog.js
  blog/[slug].js

Generated routes:

• /
• /blog
• /blog/slug

The Pages Router is simple and well documented.

App Router Overview

The App Router is based on the app directory and modern React patterns.

Key characteristics:

• Uses the app/ folder
• Supports layouts and nested layouts
• Uses Server Components by default
• Built-in data fetching with fetch

Example structure:

app/
  page.js
  blog/
    page.js
    [slug]/
      page.js

The App Router enables more advanced patterns and better performance.

Key Differences

Main differences between the two routers:

• Pages Router uses pages/
• App Router uses app/
• Pages Router relies on data fetching functions
• App Router uses async components and fetch
• App Router supports layouts natively
• App Router is the future direction of Next.js

Both routers can coexist, but should not be mixed for the same routes.

Data Fetching Comparison

Pages Router

Uses special functions:

• getStaticProps
• getServerSideProps

App Router

Uses the native fetch API:

const data = await fetch("https://example.com/api");

Data fetching is colocated with the component that needs it.

Layout Support

Pages Router

Layouts must be implemented manually using wrapper components.

App Router

Layouts are built in using layout.js files.

app/
  layout.js
  page.js

Layouts persist between navigations and improve performance.

Server Components (Conceptual)

The App Router uses React Server Components by default.

Benefits:

• Smaller JavaScript bundles
• Better performance
• Direct access to backend resources

Client-side interactivity is enabled explicitly when needed.

Which Router Should You Use?

For new projects:

• Use App Router

For existing projects:

• Keep using Pages Router unless migrating

For this series:

• We use App Router exclusively

This ensures modern best practices and future compatibility.

Common Beginner Mistakes

Avoid these mistakes:

• Mixing pages/ and app/ for the same routes
• Expecting getStaticProps to work in app router
• Forgetting that components are server-side by default
• Overusing client components

Understanding the router choice early prevents major refactors later.

Summary

In this lesson, you learned:

• Why Next.js has two routing systems
• How the Pages Router works
• How the App Router works
• Key differences between them
• Which router to choose and why

In the next lesson, we will explore layouts and shared UI using the App Router.