Codelab: Build & Deploy a Fan Page
A guided 2–3 hour project. Scaffold a Next.js app, build a customizable fan page from your own data, refactor it into reusable components, style it with CSS Modules, and deploy it live to the web.
What you'll build
Set aside 2–3 hours for this one. You'll go from an empty folder to a real, multi-page website that's deployed live on the internet — a fan page about something you love: games, movies, sneakers, recipes, a football club, anything.
Because you fill in your own topic, your own list, and your own colours, no two people build the same site. Watch for 🔧 Your turn boxes — that's where you make it yours.
Two habits run through the whole codelab: formatting your code (we'll automate it) and refactoring into reusable components. Build each piece in your real project, keep npm run dev running, and check the browser after every step.
📚 New to a concept along the way? Each step links to the matching lesson. If you've finished this module already, you're more than ready.
Keep two windows side by side: this lesson, and your project in VS Code with npm run dev running. The code blocks in each step are your reference — type them into your own files and watch the browser update.