Next.js Foundations: Build a Café Website
Learn Next.js and React from the ground up by building a real café website — pages, components, routing, styling, forms, SEO — and put it live on the internet.
Build fast, modern websites the way professionals do
Next.js is one of the most popular ways to build websites and web apps today. It's built on React, and used by companies big and small for everything from online shops to news sites. In this course you'll learn both, from the ground up.
You'll build Corner Café, a complete website for a neighbourhood café:
- A home page that shows whether the café is open right now and today's special
- A menu you can filter and search, with a page for every item
- A table booking form that checks what people type
- Its own API, good SEO, and a live link on the internet
What you'll learn
- React essentials: components, props, lists, state and events
- Just enough TypeScript to write safer code
- Pages, layouts, links and dynamic routes with the App Router
- Styling with Tailwind CSS, plus optimised images and fonts
- Server and Client Components — the key idea in modern Next.js
- Forms with Server Actions, and building an API
- Metadata, sitemaps, environment variables and deploying to Vercel
Before you start
You should know the basics of JavaScript (variables, functions, arrays, objects) and a little HTML and CSS — JavaScript for Beginners covers everything you need. No React experience needed (want to learn React on its own first? Try React Foundations). Knowing Git and GitHub helps for the final deploy step.
You'll need a laptop or desktop where you can install Node.js and VS Code (both free).
How it works
- 8 modules, 24 lessons, about 6 hours plus building time
- Uses the current version: Next.js 16 with React 19
- Starter files with a complete working app for every module — compare with yours if you get stuck
- Every step is checked by a production build and automated browser tests
- A quiz after each module, a cheat sheet and a certificate
Free forever — like every self-paced course on Avro Academy: all lessons, quizzes, downloads and your certificate. Our promise
Course outline
Module 1: Meet Next.js
What Next.js is, setting up Node.js and VS Code, and a tour of a project.
- What Next.js isFree preview10 min
- Set up your computer20 min
- A tour of a Next.js project15 min
- Module 1 quiz5 min
Module 2: React essentials
Components and JSX, props and just enough TypeScript, lists and conditions.
- Components and JSXFree preview15 min
- Props and just enough TypeScript20 min
- Lists and conditions15 min
- Module 2 quiz5 min
Module 3: Pages and routing
Pages from folders, layouts and Link, and dynamic routes with params.
- Pages come from folders12 min
- Layouts and links15 min
- Dynamic routes: a page for every item20 min
- Module 3 quiz5 min
Module 4: Styling and assets
Tailwind CSS, next/image, next/font and CSS Modules.
- Tailwind CSS basics20 min
- Images and fonts15 min
- CSS Modules — and a settings fix15 min
- Module 4 quiz5 min
Module 5: Server and client components
Server Components, Client Components with state, Suspense and streaming, and error pages.
- Server Components: the default15 min
- Client Components: state and events20 min
- Time, Suspense and streaming20 min
- When things go wrong: error pages12 min
- Module 5 quiz5 min
Module 6: Forms and Server Actions
A booking form with Server Actions, useActionState, and an API with Route Handlers.
- Forms and Server Actions20 min
- useActionState: errors and loading20 min
- Route Handlers: your own API15 min
- Module 6 quiz5 min
Module 7: SEO and settings
Metadata, share images, sitemaps, robots.txt and environment variables.
- Metadata and social sharing15 min
- Sitemaps, robots and environment variables15 min
- Module 7 quiz5 min
Module 8: Ship it
Production builds, deploying to Vercel, and next steps.
- Build for production12 min
- Deploy to Vercel20 min
- Next steps10 min
- Module 8 and final quiz5 min