Free through lesson 3

Next.js for Beginners

From setting up your environment through routing and layouts, Server Components, data fetching, Server Actions, Prisma, authentication and caching, all the way to deploying to production. Twenty lessons that build one recipe-sharing app from the first line to the last. Every piece of code and command output was produced by actually running Next.js 16.3.1.

Start from lesson 1 Unlock every course

Curriculum

The 20 lessons are grouped into five chapters. Working through them in order is the best way, but you are welcome to dip into whatever interests you. Note: Next.js cannot run inside the browser, so try everything in the project you create in lesson 1.

Chapter 1 — Getting started (lessons 1–3)

You take in how this differs from React, create a project, add folders to add pages, and learn to draw the line between server and client. By the end of this chapter you can lay out an App Router project yourself.

1

The shape of Next.js and setting up

Deciding how to answer create-next-app's questions. What each generated file is for, and the difference between dev, build and start.

Free
2

Folders as URLs, and layouts

Adding pages with page.tsx and sharing an outer frame with layout.tsx. Navigation with Link, and what (group) and _folder mean.

Free
3

The boundary between Server and Client Components

Server execution is the default. Deciding which file gets "use client" while looking at the actual errors.

Free

Chapter 2 — Building screens (lessons 4–7)

You assemble the parts a finished page needs: dynamic URLs, data fetching, loading states and error handling. By the end, an exception no longer brings the whole app down.

4

Dynamic routes and generateStaticParams

Making part of a URL a variable with [slug]. The change that made params a Promise, and reading the circles and f in the build output.

🔒 Basic
5

Fetching data and avoiding waterfalls

Awaiting directly inside a Server Component. Parallelising with Promise.all and preventing duplicate fetches with cache(). Including where secrets belong.

🔒 Basic
6

Streaming with loading.tsx and Suspense

Showing each part as it becomes ready instead of making the whole page wait. The key is putting the await inside the Suspense boundary.

🔒 Basic
7

Handling errors with error.tsx and notFound()

Measuring for yourself why redirect appears not to work. When to use error.tsx, global-error.tsx and not-found.tsx.

🔒 Basic

Chapter 3 — Appearance and SEO (lessons 8–10)

You style with Tailwind CSS v4, optimise images and fonts, and prepare metadata and OGP images. You end up in control of how the site looks in search results and on social media.

8

Styling with Tailwind CSS v4

How v4 is written now that configuration has moved into the CSS. Defining tokens with @theme, and avoiding the class-name concatenation bug that only breaks in production.

🔒 Basic
9

Optimising with next/image and next/font

Fixing the Invalid src prop you always hit with external images. fill and sizes, where priority belongs, and handling Japanese fonts.

🔒 Basic
10

Metadata and OGP images for SEO

Title templates in layout.tsx and generateMetadata. Generating OGP images with opengraph-image.tsx, and providing a sitemap.

🔒 Basic

Chapter 4 — Writing data (lessons 11–14)

You accept form input with Server Actions, validate it with Zod, and save it to the database with Prisma. Adding edit and delete leaves you with create, edit and delete all working.

11

Submitting forms with Server Actions

Calling a server function from a form without building an API. The four traps in formData, and revalidatePath.

🔒 Basic
12

Showing errors with Zod and useActionState

One schema handles validation and type conversion, and returns errors and values to the screen. Including disabling the button while submitting with useFormStatus.

🔒 Basic
13

Connecting a database with Prisma and SQLite

Setting up Prisma 7. Understanding driver adapters and the singleton, then swapping the array-backed data layer out wholesale.

🔒 Basic
14

Completing CRUD (create, edit, delete)

Passing arguments to a Server Action with bind. Initial values on an edit form, where to go after a delete, and where useOptimistic fits.

🔒 Basic

Chapter 5 — Real features and finishing up (lessons 15–20)

You add the practical features — an API, search, authentication and caching — and confirm nothing is broken with tests and type checking. Finally you publish to Vercel and run the app on your own URL.

15

Building a web API with Route Handlers

Working out when you genuinely need route.ts. The authentication, validation and result limits every public API must have.

🔒 Basic
16

Search and pagination (searchParams)

Keeping search conditions in the URL. Why useSearchParams breaks the build, and how to build paging that does not double up.

🔒 Basic
17

Cookie session authentication and proxy.ts

The traps in proxy.ts, renamed in v16. Building a cookie session yourself to see what an auth library actually does.

🔒 Basic
18

Cache Components and controlling the cache

Letting static, cached and dynamic content coexist on one page. "use cache", and reading the half-filled circle in the build output.

🔒 Basic
19

Confirming nothing is broken with tests and type checks

Write tests for what hurts most when it breaks. Validation in Vitest, the whole flow in Playwright, gathered into npm run check.

🔒 Basic
20

Deploying to production on Vercel

Why SQLite will not do, and switching to Postgres. Build commands, environment variables, and what to check once you are live.

🔒 Basic

Once you have finished all 20 lessons, protect your app with types in TypeScript. Membership unlocks every course.