CC
0 XP
0

Chapter 1: Ground Zero

Scaffolding a Project

build5 min

Scaffolding a Project

Now let's use Claude Code to scaffold a real Next.js project — the todo app we'll build throughout this course.

Create the project

Start Claude Code and give it a clear instruction:

Terminal
$claude

Then type:

"Create a new Next.js project called 'todo-app' with TypeScript, Tailwind CSS, and the App Router. Use the src directory structure."

✅Tip

Don't worry about what TypeScript, Tailwind CSS, or App Router mean yet — Claude Code handles the technical choices. You'll learn what each one does as you build with them.

💡Info

Claude Code will run create-next-app for you and handle all the setup options. It knows the latest Next.js conventions.

What Claude Code does

Watch as Claude Code:

  1. Runs npx create-next-app@latest todo-app with the right flags
  2. Navigates into the project directory
  3. Verifies the installation by checking the file structure
  4. May suggest next steps or initial configurations

Explore the result

Ask Claude Code to explain what was created:

"What's the file structure of this project? Explain the key files."

File StructureYour structure may look different — that's OK
todo-app/
├── src/
│   └── app/
│       ├── layout.tsx    — Root layout (wraps all pages)
│       ├── page.tsx      — Home page
│       └── globals.css   — Global styles
├── public/               — Static assets
├── package.json          — Dependencies
├── tsconfig.json         — TypeScript config
├── tailwind.config.ts    — Tailwind configuration
└── next.config.mjs       — Next.js configuration
✅Tip

This is a great habit: after Claude Code does something, ask it to explain what happened. You learn the "why" alongside the "what".

Run the dev server

"Start the development server"

Claude Code will run npm run dev and tell you where to open your browser (usually http://localhost:3000).

⚠️Warning

Important: move into your project folder. Claude Code just created a todo-app directory. Before continuing, exit Claude Code (type /exit or press Ctrl+C), navigate into the project, and restart Claude Code:

Terminal
$cd todo-app
Terminal
$claude

From now on, always start Claude Code from inside the todo-app folder. This ensures Claude Code can see your project files and your CLAUDE.md (which we'll create next).

You now have a working Next.js project! In the next section, we'll learn about CLAUDE.md — the file that gives Claude Code persistent memory about your project.

PreviousNext