React & Next.js: The Complete Developer Handbook

This is a free, self-paced course that takes you from React fundamentals to building, securing and shipping a production Next.js application. Instead of disconnected snippets, you build one real application from the first lesson to the last: a community tool library, where neighbours borrow drills, ladders and sanders instead of each buying their own.

There are 54 lessons in four parts, plus a capstone and a quick reference. Every lesson is a single page: the idea explained in plain language, working code, the mistakes to watch for, an exercise that adds a piece to your app, and questions to check your understanding. React examples run right on the page: press Try it on a code block, change the code and see the result immediately.

Who this course is for

• Developers new to React who are comfortable with HTML, CSS and modern JavaScript, and want a structured path rather than a pile of tutorials.
• React developers moving to Next.js and the App Router, who want to understand Server Components, caching and Server Actions properly instead of copying patterns.
• Developers preparing to lead a project, who want the production side: security, testing, deployment, reviews and decisions.

It is not a first programming course. If variables, functions, arrays, objects and async/await are still new to you, learn JavaScript first and come back; you will get far more out of it.

What you will build

The tool library is small enough to finish and real enough to need everything the course teaches. Members browse a catalogue of tools, check when each one is free, reserve it for some dates, and return it. Volunteers add tools and mark them as in repair. That simple idea brings real problems with it: two people trying to book the same drill for the same weekend, members who must only see their own reservations, a catalogue that should be fast but never show a tool as free when it is not.

Part	Lessons	What you learn	What you add to the app
1. React Foundations	1–16	JSX, components, props, state, events, lists, forms, hooks, Context, performance, error boundaries, transitions, form actions and TypeScript essentials.	The catalogue in the browser: tool cards, search and filters, a borrowing basket, a reservation form with validation.
2. The Next.js App Router	17–34	Routing, layouts, Server and Client Components, data fetching, rendering, caching in Next.js 16, streaming, errors, metadata, images and CSS.	A real site: a page per tool and category, server-rendered from a data layer, with loading states, search-friendly metadata and images.
3. Full-Stack Next.js	35–44	Route Handlers, Server Actions, validation, authentication, authorization, Proxy, secrets, content from a CMS, state and architecture.	Member accounts, reservations that cannot double-book, a volunteer dashboard, and repair guides published from a CMS.
4. Production and Leadership	45–54	Design systems, accessibility, Core Web Vitals, security, testing, deployment, monitoring, code review, Git workflow and technical leadership.	A tested, accessible, monitored app running in production, plus the decision records and checklists a team would expect.

Follow the lessons in order the first time: each one adds to the app and builds on the ones before. Later, use any lesson on its own as a reference. The introduction explains how lessons work and how to set up.

Before you start

• You should know: HTML, CSS and modern JavaScript (arrow functions, destructuring, array methods, modules, promises and async/await).
• You will need: nothing for Part 1, which runs entirely in your browser with the live editor. From Part 2: a recent Node.js LTS release, a code editor and a terminal.
• Versions: the course targets React 19 and Next.js 16. Framework details change between releases, so lessons that depend on a version say which one they were checked against and link to the official documentation.

The course is free, with no sign-up. If something is unclear, out of date or wrong, please tell me so I can fix it for everyone: get in touch.