0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · Lesson

Project Setup & CLI

Learn how to initialize a new Next.js 15 project and navigate the basic project structure using the command-line interface.

Project Setup & CLI is a free Next.js 15 Fullstack (App Router + Server Actions) lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Next.js 15 Fullstack (App Router + Server Actions) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Next.js 15: Your First Step

Welcome to Next.js 15 — the React framework for fast, scalable, production-ready apps. First up: spinning up a project and reading its structure from the CLI.

What You'll Need

Before you start, you need Node.js 18.17 or later — it provides the JavaScript runtime, and its package manager (npm, Yarn, or pnpm) installs your dependencies.

Initializing Your Project

Spin up a new project with create-next-app — it scaffolds everything for you. Just run this in your terminal.

npx create-next-app@latest

Setup Prompts Explained

The CLI asks a few questions. The one that matters: say Yes to App Router — it's essential for Next.js 15. ESLint and Tailwind are nice; TypeScript is optional.

Navigating Your New Project

When it finishes you get a new project folder. Step into it with cd and you're ready to work.

cd my-next-app

Your Project Structure

Know the key generated files: app/ holds your pages and layouts, public/ static assets, package.json your deps and scripts, next.config.js the config.

The Core `app` Directory

The app/ directory drives the App Router: layout.js for shared UI, page.js for a route's unique view, and globals.css for global styles.

Project Scripts & `npm run dev`

Your scripts live in package.json. The one you'll use constantly is npm run dev — it starts the development server.

npm run dev

Hello Next.js!

With the dev server running, open localhost:3000 to see your app. That page is rendered by app/page.js — here's a stripped-down version.

export default function Home() {
  return (
    <main>
      <h1>Hello CoddyKit!</h1>
    </main>
  );
}

Quick Check: Setup Basics

You've learned how to kickstart a Next.js project. Let's test your knowledge!

Recap: Your First Next.js Steps

Recap: you set up Next.js 15 with create-next-app, explored the app/ directory, and launched the dev server. Next: file-system routing.

Frequently asked questions

Is the “Project Setup & CLI” lesson free?

Yes — the full text of “Project Setup & CLI” is free to read here on the web, and the Next.js 15 Fullstack (App Router + Server Actions) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Next.js 15 Fullstack (App Router + Server Actions) course, upgrade to CoddyKit PRO.

What will I learn in “Project Setup & CLI”?

Learn how to initialize a new Next.js 15 project and navigate the basic project structure using the command-line interface. You practise Next.js 15 Fullstack (App Router + Server Actions) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Next.js 15 Fullstack (App Router + Server Actions)?

No prior experience is required. Next.js 15 Fullstack (App Router + Server Actions) on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Project Setup & CLI” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Next.js 15 Fullstack (App Router + Server Actions) lesson?

Yes. Every Next.js 15 Fullstack (App Router + Server Actions) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Project Setup & CLI
  2. File-System Routing Basics
  3. Pages & Layouts Overview
  4. Styling Your Next.js App
← Back to Next.js 15 Fullstack (App Router + Server Actions)