Stop 11 · Next.jsTopics · 2/16

Pages Router

In short

Plenty of company codebases started before the App Router existed. Knowing the older Pages Router means you won't freeze when your internship repo has a pages/ folder.

Next.js's original router (the `pages/` directory), where each file maps directly to a route — still widely used in existing production codebases.

The jaadu happily turns the dial of an old wooden FM radio with music notes floating out.

Think of it like this

The old FM radio at home

Your dad's FM radio still works perfectly, it's just tuned differently from a phone app. The Pages Router is like that: older, stable, still supported, with its own way of doing things. You should know how to turn its dials.

Watch it happen

Pages Router vs App Router

Pages Router (pages/)

pages/about.tsx becomes /about directly
Data via getServerSideProps or getStaticProps
Every component ships JavaScript to the browser

App Router (app/)

app/about/page.tsx becomes /about
Fetch inside async Server Components
Server Components by default, less JavaScript

Start new projects with the App Router, but learn to read the Pages Router for older codebases.

The big ideas

What you need to know

One file, one route

pages/about.tsx becomes /about directly. No page.tsx naming rule.

Data functions

getServerSideProps runs on every request, getStaticProps at build time. Both pass props to the page.

_app and _document

pages/_app.tsx wraps every page, a bit like a root layout. _document controls the html shell.

All components are client-capable

There are no Server Components here. Pages ship their JavaScript and hydrate in the browser.

See it in code

Walk through the code

tsx

1// pages/courses/[id].tsx  ->  /courses/422import type { GetServerSideProps } from "next";3 4type Props = { course: { id: string; name: string } };5 6export const getServerSideProps: GetServerSideProps<Props> = async ({ params }) => {7  const res = await fetch(`https://api.example.com/courses/${params?.id}`);8  if (!res.ok) return { notFound: true };9  return { props: { course: await res.json() } };10};11 12export default function CoursePage({ course }: Props) {13  return <h1>{course.name}</h1>;14}

1/4The file path is the route. [id] is a dynamic segment.

The data function runs on the server and hands props to the page. Returning { notFound: true } shows the 404 page.

Save yourself the pain

Common mistakes

Oops

Using getServerSideProps inside an app/ folder page.

Do this instead

Those functions only work in pages/. In app/, fetch directly inside an async Server Component.

Oops

Thinking you must rewrite an old project to the App Router right away.

Do this instead

Both routers can live in one project. Teams usually move routes over one at a time.

Your mission

Spot the differences

~25 min

Quick check

In the Pages Router, which function fetches data on every request?

Go deeper

1Compare a route built in `pages/` to the same route built in `app/`.
2Learn `getStaticProps`/`getServerSideProps` — the Pages Router's data-fetching model.
3Recognize you'll likely maintain Pages Router code even while building new App Router projects.