Web DevelopmentIntermediatejavascript

Next.js Fundamentals

Routing, server components and rendering strategies in the Next.js App Router, pinned to Next.js 15.

Next.js is not a router you add to a React app. It is a framework that decides, per route, whether a page is built at compile time, per request, or streamed - and whether the code that renders it ever reaches the browser at all. Getting that decision wrong is what produces pages that are slow for reasons nobody can find, bundles full of code that only ever runs on the server, and caching bugs that only reproduce in production. This course works on the App Router and pins its claims to Next.js 15, because that release moved several defaults that most tutorials still describe the old way. fetch is no longer cached by default. params and searchParams are Promises and must be awaited. cookies, headers and draftMode are async. Each of those is a breaking change that produces a confusing error rather than a clear one, so each gets its own treatment here. The practice is prediction-based. The sandbox cannot run a Next.js server, so the questions ask what Next.js will do with a given route: what ships to the browser, what is cached, when a function runs. Each prediction states the version and the default it depends on, because a prediction without a version is not an answer.

4.6 (120) 890 students 240 min 18 lessons 240 XP on completion

What you will be able to do

  • Explain what the App Router decides for you at build time versus at request time, and read a build report to tell the difference
  • Draw the line between a Server Component and a Client Component, and place 'use client' at the narrowest node that works
  • Predict when a route is static, dynamic or streamed, and which Next.js 15 default controls it
  • Choose correctly between cache: 'no-store', 'force-cache', revalidate, revalidateTag and revalidatePath for a given situation
  • Write a Server Action that revalidates exactly the route it changed, and explain why it must be async
  • Predict which of a component's imports end up in the browser bundle, and why a server-only import can fail the build

Assessments

Dashboard