What Next.js is
React, with superpowers
React is a JavaScript library for building user interfaces out of components — reusable pieces like a menu card or a navigation bar. It was created at Facebook and is now one of the most used tools in web development.
Next.js is a framework built on React. React gives you the building blocks; Next.js gives you everything else a real website needs:
| Next.js gives you | Which means |
|---|---|
| Routing | Make a folder, get a page — no setup |
| Server rendering | Pages arrive as ready-made HTML: fast, and easy for Google to read |
| Prerendering | Pages that don't change are built once, ahead of time |
| Images and fonts | Automatically resized and optimised |
| Server Actions and APIs | Back-end code (like handling a form) in the same project |
What you'll build
By the end of the course you'll have built this café website, and put it on the internet:
How the course works
The starter files have a folder for each module (step 1 to step 7), each a complete, working app. Build your own version as you go — and if something doesn't work, compare it with the matching folder.
This course uses Next.js 16. Next.js changes quickly: if you find older tutorials online, some of their code may look different (for example, older code doesn't await params). When in doubt, trust the official docs at nextjs.org.
Try it
Download the starter files and unzip them. Have a look inside step-7-final — by the end, you'll understand every file.
Downloads
1 file to download once you enrol.