Lesson 2 +10 XP

App Router vs Pages Router Overview

Next.js features two distinct routing systems: the legacy Pages Router (/pages directory) and the modern App Router (/app directory) introduced in Next.js 13 and stabilized in Next.js 14+.

Understanding the Paradigm Shift

The Pages Router relied on page-level data fetching methods such as getServerSideProps, getStaticProps, and getInitialProps. Every component inside the pages/ directory defaulted to a Client Component.

The App Router is built on top of React Server Components (RSC). In the app/ directory, every component is a Server Component by default unless explicitly marked with the 'use client' directive.

Feature / Aspect	Pages Router (`pages/`)	App Router (`app/`)
Root Directory	`src/pages/` or `pages/`	`src/app/` or `app/`
Default Component Type	Client Components	React Server Components (RSC)
Data Fetching	`getServerSideProps`, `getStaticProps`	Async/await inside Server Components & `fetch()`
Layouts	Custom `_app.tsx` wrapper hacks	Nested `layout.tsx` with state preservation
Special File Names	Any file name creates a route	Routing requires directory + `page.tsx`
API Endpoints	`pages/api/*.ts`	Route Handlers in `app/api/*/route.ts`

Directory Structure Comparison

In the Pages Router, file names determine route paths directly:

pages/
├── index.tsx         -> /
├── about.tsx         -> /about
└── blog/
    └── [id].tsx      -> /blog/:id

In the App Router, directories define route paths, and special filenames define the UI for that segment:

app/
├── layout.tsx        -> Root Layout (applies to all routes)
├── page.tsx          -> /
├── about/
│   └── page.tsx      -> /about
└── blog/
    └── [id]/
        └── page.tsx  -> /blog/:id

Shared Nested Layouts

One of the greatest advantages of the App Router is true nested layouts. Navigating between sibling pages inside a shared layout preserves component state, prevents unnecessary re-renders, and keeps scroll position.

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex min-h-screen">
      <aside className="w-64 bg-slate-900 text-white p-4">Dashboard Nav</aside>
      <main className="flex-1 p-6">{children}</main>
    </div>
  );
}

TL;DR

The App Router (app/) is the modern standard for Next.js, powered by React Server Components.
The Pages Router (pages/) is the legacy model using page-level data methods like getServerSideProps.
In the App Router, files must be named page.tsx inside route directories to be publicly accessible.
Nested layout.tsx files allow building complex UIs without losing component state on navigation.