🎨Frontend Development
Core skills · Lesson 7/9

Next.js — React, Production-Ready

25 min 1 exercise 1 quiz

What you'll learn

  • What a "framework" adds on top of React
  • File-based routing, server rendering, and why they matter
  • The 3 rendering modes — SSR, SSG, and static export — and when each applies
  • A hands-on exercise modeling the file-based router
  • The mental map you need before opening the docs

Next.js needs Node and a dev server, so this is mostly a map-drawing lesson: theory + quiz + one router-modeling exercise, then you build locally.

The furnished apartment 🏢

React gives you excellent bricks (components). But a real app also needs plumbing: multiple pages, URLs, fast first load, SEO, images, deployment. Wiring those by hand is weeks of work.

Next.js is the furnished apartment — React with the plumbing pre-installed:

1. File-based routing. Make a file → you have a page. No router setup:

app/
├── page.tsx          →  yoursite.com/
├── about/page.tsx    →  yoursite.com/about
└── blog/[slug]/page.tsx  →  yoursite.com/blog/anything

[slug] is a wildcard — one file serves /blog/hello, /blog/react-tips, etc.

2. Server rendering (SSR/SSG). Plain React sends an empty page plus a big JS bundle; the user stares at white until it boots. Next renders the HTML on the server (or at build time) and ships the finished page — fast first paint, and Google can read it (SEO). This very site is Next.js exported as static files.

3. Server components. By default components run on the server: they can read databases directly and ship zero JS to the browser. You add "use client" only where interactivity (useState, onClick) is needed.

4. Batteries. <Image> optimizes pictures, <Link> prefetches pages so clicks feel instant, API routes let you write backend endpoints in the same repo.

A real Next.js page: the file's location defines its URL, the component is async and fetches data on the server, and the browser receives finished HTML. (Runs in a Next project, not in this sandbox.)

// app/blog/[slug]/page.tsx — a complete Next.js page
export default async function BlogPost({ params }) {
  const { slug } = await params;          // "react-tips" from /blog/react-tips
  const post = await getPost(slug);       // runs ON THE SERVER — can hit a DB

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  );
}

Three ways to render — pick per page 🎛️

"Server rendering" isn't one thing — Next.js gives you three modes, and real apps mix them page by page:

  1. SSR (Server-Side Rendering) — the server builds the HTML fresh on every request. Best for pages that change per-visitor (a personalized dashboard, live prices).
  2. SSG (Static Site Generation) — the HTML is built once, at build time, then served instantly to everyone, like a plain file. Best for pages that rarely change (a blog post, a marketing page) — this is why Next sites feel instant.
  3. Static export (output: "export") — takes SSG further: the entire site becomes a folder of plain HTML/CSS/JS files, with no server needed at all. You can host it anywhere that serves files — including free static hosts like GitHub Pages.

This is not theoretical — this exact learning platform's next.config.ts contains output: "export". Every lesson, every roadmap page, is pre-built once and shipped as static files to GitHub Pages, which is why the site works without running any backend server at all (only the small login API is a separate server).

Exercise 1

Model the file-based router. Write fileToRoute(filePath) that converts a Next.js file path into its URL:

  • "app/page.tsx" → "/"
  • "app/about/page.tsx" → "/about"
  • "app/blog/[slug]/page.tsx" → "/blog/:slug" (dynamic segments become :name)

(Remove "app" and "page.tsx", turn [x] into :x.)

Open in Code Lab
Quick quiz

Question 1 of 6

In the App Router, how do you create the page yoursite.com/contact?

Question 2 of 6

What does [slug] in a folder name mean?

Question 3 of 6

Why does server rendering improve first load?

Question 4 of 6

When do you add "use client" to a component?

Question 5 of 6

Which rendering mode fits a personalized dashboard that differs per visitor?

Question 6 of 6

What does output: "export" produce?

Build your first Next app tonight

npx create-next-app@latest my-site
cd my-site && npm run dev

Open localhost:3000, then: add an app/about/page.tsx, link to it with <Link>, and deploy free on Vercel (connect your GitHub repo — it auto-deploys every push). If you want a fully static, server-free site like this platform, add output: "export" to next.config.ts and deploy the resulting out/ folder to GitHub Pages instead.

Freelance note: "business site + blog in Next.js, deployed" is one of the most sellable junior projects — it demonstrates React, routing, SEO and deployment in one artifact.

Practice

Reading is not learning until you run something. Pick one.

Open an example in Code Lab

Blank Code Lab in JavaScript (Node.js)
Previous
Tailwind CSS — Style at the Speed of Thought
Next lesson
Getting Paid — Turn Skills into Income