Skip to main content
PProfileMatch
Read Play

Next.js Tutorial

Build and ship full-stack React apps with the Next.js App Router: routing, server components, caching and deployment

Intermediate4 lessonsabout 22 min of reading

This course is for developers who already know React, including components, props, state and effects, and now want to build real sites with Next.js. If you need a refresher first, work through the React course. You should also be comfortable reading TypeScript, because every example uses it.

Next.js is a framework on top of React that decides where your code runs: at build time, on a server for each request, or in the browser. Most of the confusion people have comes from not knowing which of those three places a given line executes in. The four lessons are designed around that question, with small but complete examples you can recreate in a new project.

You will start with the App Router and its file-based conventions, then learn the split between server and client components, then see how data fetching, caching and rendering modes interact, and finish with static export, deployment options and a checklist of production mistakes. Version-specific behaviour changes between releases, so where it matters the lessons say so, and you should confirm details against the documentation for the version you install.

Start lesson 1: Next.js App Router and File-Based Routing ExplainedRide it: tricks, quizzes, XP

Next.js lessons

  1. 1Next.js App Router and File-Based Routing ExplainedLearn how the Next.js App Router maps folders to URLs: page, layout, dynamic segments, loading, error and not-found files, with a complete working example.5 min read
  2. 2Next.js Server Components vs Client ComponentsUnderstand where each Next.js component runs, what the use client directive really does, and how to compose a server page with an interactive client island.5 min read
  3. 3Next.js Data Fetching, Caching and Rendering ModesFetch data in Next.js server components, then control when pages are static or dynamic with revalidate, no-store, cookies and on-demand revalidation.6 min read
  4. 4Next.js Static Export, Deployment and Production MistakesLearn what Next.js output export can and cannot do, how to deploy to a Node server, Docker or static host, and the production mistakes to catch.6 min read

Preparing for an interview? Practise React interview questions

Learning Next.js to land a job? Browse open roles or check which skills are trending.