0Pricing
Frontend Academy · Lesson

Pages Router vs App Router

Compare Next.js routing paradigms: the file-based Pages Router and the new App Router with nested layouts, loading, and error boundaries.

Two Routers, One Framework

Next.js has two routing systems: the original Pages Router (pages/ directory) and the newer App Router (app/ directory, Next 13+). Both still work in Next 14/15.

Pages Router — File-Based Routing

Each file under pages/ becomes a route. Dynamic segments use brackets: pages/users/[id].tsx matches /users/123.

pages/
  index.tsx        // route: /
  about.tsx        // route: /about
  blog/
    index.tsx      // route: /blog
    [slug].tsx     // route: /blog/:slug
  api/
    users.ts       // API route: /api/users

All lessons in this course

  1. Pages Router vs App Router
  2. Server Components and Client Components
  3. SSG SSR and ISR
  4. Next.js API Routes and Middleware
← Back to Frontend Academy