Lesson 2

Setting Up Next.js — Project structure & running locally

What Is Next.js?

Next.js is a framework for building web applications. A framework is a set of pre-built building blocks — instead of building everything from scratch, you start with a structure that already handles the boring, fiddly parts: routing between pages, performance, and deployment optimization.

Next.js is built by Vercel (the same platform you'll use to deploy your app in a later module). It's used by major companies like Nike, Twitch, and Hulu.

For our purposes, Next.js gives us a modern, production-ready foundation that Claude Code knows inside out. You describe what you want; Claude writes the code on top of this foundation.

Creating Your Project

Open your terminal and navigate to where you keep projects:

cd ~/Documents

Now create a new Next.js project:

npx create-next-app@latest my-app

Replace my-app with your app's name. Use hyphens instead of spaces:

npx create-next-app@latest focus-dashboard

The Setup Questions

create-next-app will ask you a few questions. Here are the recommended answers:

Question	Answer
Would you like to use TypeScript?	Yes
Would you like to use ESLint?	Yes
Would you like to use Tailwind CSS?	Yes
Would you like your code inside a `src/` directory?	No
Would you like to use App Router?	Yes
Would you like to use Turbopack?	Yes
Would you like to customize the import alias?	No

It will then download and install everything. This takes a minute or two.

The exact wording and order of these prompts can shift between versions of Next.js. If you see a question that isn't in the table, the safe default is to accept the recommended option — and you can always ask Claude Code about it later.

⚡ Or let Claude Code set it up for you

You don't have to run create-next-app and answer all those questions by hand. Once Claude Code is installed (Module 3), open a terminal in the folder where you keep your projects, start a session with claude, and paste this in:

Create a new Next.js app in a folder called focus-dashboard using create-next-app.
Use TypeScript, ESLint, Tailwind CSS, the App Router, and Turbopack. Do NOT use a
src/ directory and do NOT customize the import alias. Run it non-interactively so I
don't have to answer the setup prompts, then move into the folder and start the dev
server so I can open it at http://localhost:3000.

Claude runs the exact same commands for you, picks the right answers, and explains what it's doing as it goes. The manual steps above are still worth reading — they're what Claude is doing under the hood, and knowing them makes it obvious when something looks off.

Exploring the Project Structure

Once it's done, move into your project folder and open it in VS Code:

cd focus-dashboard
code .

VS Code opens with a folder structure in the left sidebar. Here are the parts that matter:

focus-dashboard/
├── app/               ← Your pages and components live here
│   ├── page.tsx       ← The home page (what shows at yourapp.com/)
│   ├── layout.tsx     ← The overall layout (header, footer, etc.)
│   └── globals.css    ← Global styles
├── public/            ← Images and static files
├── package.json       ← Lists all the packages your app uses
└── next.config.ts     ← Next.js configuration

Don't worry about understanding all of it. The key file is app/page.tsx — that's your home page. Claude Code will manage everything else.

Running Your App

In your terminal (make sure you're inside your project folder), start the development server:

npm run dev

You'll see something like:

▲ Next.js 15.x.x
- Local: http://localhost:3000

Open your browser and go to http://localhost:3000

You should see the default Next.js welcome page — a clean page with the Next.js logo and some links. That means everything is working.

localhost:3000 is your app running on your own computer. Only you can see it. Nobody else on the internet can — that comes later when you deploy.

Start a Claude Code Session

With your development server still running, open a new terminal window. Don't close the first one — it's running your server.

In the new terminal, navigate to your project folder and start Claude:

cd ~/Documents/focus-dashboard
claude

You're now in a Claude Code session inside your project folder. Claude can see all your files and can read and modify them directly.

Your First Project Setup Prompt

Hand Claude your app spec. Here's a template for how to do it:

I've just created a new Next.js project. I want to build [app name].

Here's my spec:

Problem: [what it solves] Users: [who uses it] Core pages:

Core features:

[Feature 1]

[Feature 2]

[Feature 3]

Design: [describe the look and feel]

Tech stack: Next.js with App Router, TypeScript, Tailwind CSS. No database yet (we'll add that later).

Please:

Clear out the default Next.js placeholder content

Set up the basic page structure and navigation

Build out each page with placeholder content and the right layout

Make it look good — don't leave it with Tailwind's default unstyled look

What Happens Next

Claude will:

Read your existing project files
Replace the default Next.js content with your app's structure
Create a page file for each of your pages
Add navigation between pages
Apply basic styling

As it works, you'll see it creating and editing files. Your browser at http://localhost:3000 will refresh automatically — this is called hot reload, and it means you watch your app change in real time as Claude builds it.

The Folder Structure After Setup

After Claude sets up your project, you'll have something like:

app/
├── page.tsx           ← Home page
├── layout.tsx         ← Site-wide layout (nav, etc.)
├── globals.css        ← Global styles
├── dashboard/
│   └── page.tsx       ← Dashboard page (/dashboard)
└── settings/
    └── page.tsx       ← Settings page (/settings)

In the App Router, each folder inside app/ becomes a URL route:

app/page.tsx → http://localhost:3000/
app/dashboard/page.tsx → http://localhost:3000/dashboard
app/settings/page.tsx → http://localhost:3000/settings

You don't have to memorize this — just know that adding a new page means creating a new folder with a page.tsx file inside. Claude handles the wiring.

Summary

Next.js is a web app framework that handles routing, performance, and deployment for you.
Create a project with npx create-next-app@latest my-app and accept the recommended setup options.
Run it locally with npm run dev, then view it at http://localhost:3000.
Start Claude Code in a second terminal window inside your project folder so your server keeps running.
Hand Claude your spec and let it set up the structure — hot reload shows changes instantly.
In the App Router, each folder in app/ with a page.tsx becomes a URL route.