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.

Pages Router vs App Router is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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

Pages Router — Data Fetching

Special exports declare fetching behaviour: getStaticProps (SSG), getServerSideProps (SSR), getStaticPaths (SSG with dynamic routes).

// pages/posts/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post }, revalidate: 60 };
}

export default function Post({ post }) {
  return <article>{post.body}</article>;
}

App Router — Folder-Based Routing

App Router uses folders as route segments. A page.tsx file inside a folder defines the page.

app/
  layout.tsx       // shared root layout
  page.tsx         // route: /
  about/
    page.tsx       // route: /about
  blog/
    page.tsx       // route: /blog
    [slug]/
      page.tsx     // route: /blog/:slug

App Router — Special Files

Per-segment files give powerful primitives: layout.tsx (persistent UI around children), loading.tsx (Suspense fallback), error.tsx (error boundary), not-found.tsx.

Nested Layouts

App Router layouts wrap nested routes and persist across navigation — no remount.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

// app/dashboard/settings/page.tsx renders inside the Sidebar layout

Data Fetching in App Router

Server Components can be async and fetch directly — no getServerSideProps/getStaticProps. The component runs on the server and ships only HTML to the client.

// app/posts/[slug]/page.tsx (Server Component by default)
export default async function Post({ params }) {
  const post = await fetch(`https://api/posts/${params.slug}`, {
    next: { revalidate: 60 } // ISR-like caching
  }).then(r => r.json());
  return <article>{post.body}</article>;
}

Client Components in App Router

Add 'use client' at the top of a file to mark its component as a Client Component (interactive, runs in the browser).

// app/Counter.tsx
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

API Routes vs Route Handlers

Pages Router: pages/api/users.ts exports a default function with req/res. App Router: app/api/users/route.ts exports HTTP methods (GET, POST) as named exports using the standard Request/Response.

// app/api/users/route.ts
export async function GET(request: Request) {
  const users = await db.users.findMany();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return Response.json(user, { status: 201 });
}

Migration Strategy

Both routers can coexist in the same project — incrementally move pages one at a time. App Router takes precedence when there's a conflict.

When to Use Which

New projects: App Router (more powerful, current focus of investment). Existing Pages Router projects: stay or migrate gradually. Tiny static sites with no need for layouts or RSC: either works.

Quick Check

How do you mark a component as a Client Component in the Next.js App Router?

Recap: Pages Router vs App Router

Pages Router: file-based, getStaticProps/getServerSideProps. App Router (Next 13+): folder-based, async Server Components, nested layouts, loading/error files. Mark client interactivity with 'use client'. API routes: pages/api/* vs app/api/*/route.ts with HTTP method exports. Both coexist; App Router gets active development.

Frequently asked questions

Is the “Pages Router vs App Router” lesson free?

Yes — the full text of “Pages Router vs App Router” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “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. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Pages Router vs App Router” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Frontend Academy