Exercise 12
Start a Next.js Project
Create a new Next.js project, understand frameworks vs libraries, and install the Lucide icon library.
What you'll learn
Key takeaways from this exercise
- Understanding what Next.js is and how frameworks differ from libraries
- Creating a new Next.js project with
create-next-app - Understanding the Next.js project structure and App Router
- Installing new dependencies
- Using Lucide icons and other external libraries
- Creating a new Git repository and publishing it to GitHub
This exercise has different instructions depending on operating system.
Introduction
You've completed Parts 1 and 2 — you've set up a development environment, deployed a website, and learned the fundamentals of HTML, CSS, JavaScript, and components by building a portfolio site with Astro. Now it's time to build something more ambitious: a weather app that fetches live data and displays it with custom visuals.
Why Next.js
For this project, we're switching to a different framework: Next.js. Next.js is built on top of React — the most popular frontend library for building user interfaces. While Astro excels at content-focused, mostly static websites, Next.js is designed for more interactive applications — the kind that respond to user actions and work with dynamic data. It's one of the most widely used frameworks in production, and the skills you build here are directly applicable to real-world projects.
Here's the reassuring part: the core concepts you learned in Part 2 transfer directly. Components still work the same way — they accept props, render UI, and compose together. You'll still use Tailwind for styling and npm for managing packages. The syntax looks slightly different (React uses .tsx files instead of .astro files), but the mental model is the same. You're not starting over — you're applying what you know in a new context.
Project structure
A Next.js project has a specific structure. The app/ directory is where your pages live — each file called page.tsx becomes a route in your application. layout.tsx wraps all your pages with shared UI like headers and footers. This file-based approach to organizing pages is one of the things that makes Next.js intuitive once you understand it.
Dependencies and tooling
Same as we did in the Astro project, you'll install a few dependencies using npm and use TypeScript.
What you'll have
By the end of this exercise, you'll have a fresh Next.js project running locally, set up and ready to go. That's the foundation for everything we build in this part.
Create a free account to access the full course
In order to access full course content and track your progress, please sign in