Pages Router (legacy)

Last reviewed Jun 1, 2026 Content v20260601

Track mode

client_nextjs

Means

In-browser Next.js (client components)

Reading

~1 min

Level

advanced

This lesson

This lesson teaches Pages Router (legacy): the concepts, APIs, and habits you need before advancing in Next.js.

Routing maps URLs to components—guards and resolvers protect enterprise flows.

You will apply Pages Router (legacy) in contexts like: Marketing sites, dashboards, e-commerce, and Vercel-style deployments that need hybrid static + dynamic pages.

Write TSX for Client Components, click Run—React 18 CDN + in-browser TSX compile; use client/server lessons explain App Router concepts; mountApp renders interactive UI; printOutput feeds the terminal.

When hooks, state, and effects from intermediate lessons are familiar.

Before the App Router, Next.js used the Pages Router: files in pages/getStaticProps, getServerSideProps, and API routes in pages/api.

Mapping concepts

Pages Router	App Router
`pages/index.tsx`	`app/page.tsx`
`pages/_app.tsx`	`app/layout.tsx`
`getServerSideProps`	async Server Component + fetch
`pages/api/*`	`app/**/route.ts`

Why you still see it

Large production apps may migrate incrementally. Read legacy codebases, build new features in app/ when using the hybrid approach, or plan a structured migration.

Self-check

What replaces getStaticProps in App Router?
Where did API routes live in Pages Router?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

getServerSideProps vs RSC?
Migration first step?

No discussion yet. Be the first to ask a question.