▲

Next.js for Beginners

Graduate from CDN scripts to a real toolchain. Guided codelabs covering create-next-app, the App Router, pages, layouts, server vs client components, data fetching, and deploying to Vercel.

Prerequisites:⚛️React Fundamentals

What is Next.js (and Why)

Understand what Next.js adds on top of React — routing, project structure, bundling, and server rendering — and why real teams reach for it.

Installing Node and npm

Set up the toolchain every real React project needs: Node.js to run JavaScript outside the browser, and npm to install packages.

Scaffolding with create-next-app

Generate a complete, ready-to-run Next.js project with one command — and learn every prompt so you get the JavaScript setup this module uses.

A Tour of Your Project

Get oriented in the files create-next-app generated — what app/, page.js, layout.js, public/, and package.json each do.

The App Router: page.js and layout.js

Run the dev server and learn the two special files that define every Next.js route: page.js for a route's UI and layout.js for shared structure.

Creating Pages and Routes

Add new pages by creating folders — each folder with a page.js becomes a real URL, so /about and /contact appear just by making files.

Navigating with next/link

Connect your pages with the <Link> component for fast, client-side navigation — and learn why it beats a plain <a> tag for internal links.

Layouts and Nested Layouts

Share UI across pages with layouts, and give one section of your site its own wrapper with a nested layout — all through the children prop.

Server vs Client Components

Learn the App Router's biggest idea: components run on the server by default, and you opt into browser interactivity with 'use client'.

Fetching Data on the Server

Load data directly inside an async Server Component with await fetch — no useEffect, no loading flash, and your API keys stay safe.

Styling and Static Assets

Add CSS with global styles and CSS Modules, serve images from the public folder, and use next/image for automatic optimization.

Capstone: Build and Deploy a Multi-Page Site

Combine everything — layout, routing, links, a client component, and server data fetching — into a real multi-page site, then deploy it to the web.

Codelab: Build & Deploy a Fan Page

A guided 2–3 hour project. Scaffold a Next.js app, build a customizable fan page from your own data, refactor it into reusable components, style it with CSS Modules, and deploy it live to the web.