Next.js (Pages Router)
Build React applications with Next.js using the Pages Router pattern

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.


Note: This unit covers the Pages Router, the original Next.js routing pattern. For the newer App Router with React Server Components, see the Next.js App Router unit.

Next.js is a powerful React framework that enables server-side rendering, static site generation, and provides many other features for building production-ready applications.

Created by Vercel (formerly Zeit), Next.js has become one of the most popular ways to build React applications because it solves common problems like:

  • Server-Side Rendering (SSR) - Better SEO and faster initial page loads
  • Static Site Generation (SSG) - Pre-render pages at build time
  • File-based Routing - No need to configure routes manually
  • API Routes - Build your backend API alongside your frontend
  • Built-in CSS Support - CSS Modules, Sass, and CSS-in-JS
  • Zero Configuration - Sensible defaults that just work

The Pages Router uses the pages/ directory where each file becomes a route:

  • pages/index.js/
  • pages/about.js/about
  • pages/blog/[slug].js/blog/:slug

In this unit, you’ll learn how to build complete web applications with Next.js using the Pages Router pattern.

Lessons in this unit:

0: ▶︎ Introduction
1: Getting started with Next.js (Pages Router), a tutorial
2: How to install Next.js
3: How I set up a Next.js project structure
4: Linking two pages in Next.js using Link
5: How to use the Next.js Router
6: Dynamic content in Next.js with the router
7: Prefetching content in Next.js
8: How to programmatically change a route in Next.js
9: View source to confirm SSR is working in Next.js
10: Feed data to a Next.js component using getInitialProps
11: Styling Next.js components using CSS
12: Next.js: populate the head tag with custom tags
13: How to use Next.js API Routes
14: How to get cookies server-side in a Next.js app
15: Deploying a Next.js application on Now
16: Deploying a Next.js app in production