HowToCodePage

Next.js

Full-stack React with routing and server rendering.

Next.js is taught here in 13 lessons, running from File-based routing and layouts through to Testing, error handling and observability. Each lesson takes one topic, shows the working code, and links onward to the next, so the course can be read straight through in order.

TrackFront-end Development
Lessons13
LevelBeginner to intermediate
Reading timeabout 3 hours
PrerequisitesHelpful, but not required: React

Lessons

  1. File-based routing and layoutsHow folders in app/ become URLs, how nested layouts persist across navigation, and the special files that handle loading and errors.
  2. Data fetching and server componentsFetch on the server, choose your caching deliberately, keep secrets out of the client bundle, and mutate data with server actions.
  3. Building and deployingWhat next build produces, how to read the route summary, and the deployment targets for a Node server, a container or static hosting.
  4. Setting up a project with create-next-appEvery CLI flag that shapes the project, the folder layout it produces, and which config files you will actually edit.
  5. Routing, links and navigationThe Link component and prefetching, the navigation hooks, route groups and catch-all segments, and when to redirect.
  6. Dynamic routes, params and metadataAwait the params promise, prerender known slugs, generate per-page metadata and Open Graph images, and know what makes a route dynamic.
  7. Route handlers and API endpointsWrite route.ts handlers for each verb, stream a response, verify a webhook safely, and decide when a server action is the better tool.
  8. Server actions and forms in depthThe use server directive, form actions, useActionState and useFormStatus, structured errors, revalidation and optimistic UI.
  9. Caching, revalidation and Cache ComponentsThe caching layers, when fetch is not cached, caching a whole computation with use cache, cacheLife and cacheTag, and invalidating on demand.
  10. Middleware, headers, cookies and sessionsRun code before a route renders, choose between a rewrite and a redirect, and protect a route group without trusting the client.
  11. Styling, fonts and image optimisationCSS Modules versus global CSS versus Tailwind, self-hosted fonts with next/font, and sizing images correctly with next/image.
  12. Streaming, Suspense and partial prerenderingInstant loading UI, streaming server components with Suspense boundaries, skeletons that match the layout, and a static shell with dynamic holes.
  13. Testing, error handling and observabilityComponent tests with Vitest, end-to-end flows with Playwright, error boundaries that users can recover from, and reporting real metrics.

More in Front-end Development

HTML CSS JavaScript TypeScript HTML DOM AJAX JSON Tailwind CSS Bootstrap 5 Foundation Vue.js React Angular jQuery ECharts Chart.js SVG Font Awesome

FAQ

How long does the Next.js course take?
It has 13 lessons, about 3 hours of reading. Expect roughly twice that if you type out and run every example.
Do I need prior experience for Next.js?
Not strictly. It helps to have read React first, because some lessons build on it, but every lesson explains its own assumptions.
What should I read after Next.js?
Continue with Angular (3 lessons), the next course in Front-end Development.

Last refreshed 2026-09-18.