Creating a Next.js Project with Cursor

Time to create your first Next.js project! We'll use Cursor and AI to speed up the process.

What is Next.js?

Next.js is a React framework for building web applications. The official React documentation (react.dev) lists it first among the frameworks it recommends for new apps.

Why Next.js?

• Fast - Server-Side Rendering (SSR)
• Easy - routing, API routes and styling ready from the start
• SEO - great for search engines
• Hot Reload (in the docs: Fast Refresh) - changes visible instantly
• Used by - Nike, OpenAI and Sonos, among others (nextjs.org/showcase gallery)

Using AI for Project Setup

Instead of googling "how to create a Next.js project", we'll ask AI in Cursor!

Step 1: Open AI Chat

In Cursor press: Cmd/Ctrl + L

Step 2: Ask AI

Type exactly this prompt:

How do I create a new Next.js project with TypeScript and Tailwind CSS? Give me the exact npx command.

Step 3: Copy the command

AI will give you a command similar to:

npx create-next-app@latest krakens-call

Sometimes the AI adds flags, e.g. --typescript --tailwind --app. That command works too: the installer then asks no questions and uses the recommended settings for everything else.

Step 4: Run in terminal

1. Open the terminal (Ctrl + `)
2. Make sure you're in the folder where you want to create the project
3. Paste the command and press Enter

Step 5: Answer the installer's questions

First the installer asks whether to use the recommended settings:

Would you like to use the recommended Next.js defaults?
  Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, AGENTS.md
  No, customize settings - Choose your own preferences

Choose Yes, use recommended defaults (arrow keys and Enter). You get exactly what we need: TypeScript, ESLint, Tailwind CSS and App Router (the most important one!), plus an AGENTS.md file with instructions for AI assistants.

If you choose No, customize settings, the installer asks about each option separately. Answer like this:

• TypeScript: Yes
• linter: ESLint
• React Compiler: No
• Tailwind CSS: Yes
• src/ folder: No
• App Router: Yes (the most important one!)
• import alias: No
• AGENTS.md: Yes

Step 6: Wait (~1-2 minutes)

npm will download all packages. You'll see:

Creating a new Next.js app in /path/to/krakens-call.

Installing packages. This might take a couple of minutes.

Success! Created krakens-call at /path/to/krakens-call

Opening the Project in Cursor

Method 1: Via terminal

cd krakens-call
cursor .

(cursor . opens Cursor in the current folder. If the terminal doesn't know the cursor command, open the Command Palette in Cursor with Cmd/Ctrl + Shift + P, type "install cursor" and run the command that installs cursor. The code . command opens Visual Studio Code, not Cursor.)

Method 2: Via Cursor

1. File → Open Folder
2. Select the krakens-call folder
3. Click "Open"

Next.js 16 Project Structure

When you open the project, you'll see this structure:

krakens-call/
├── app/                  ← Main application folder (App Router)
│   ├── favicon.ico      ← Site icon
│   ├── globals.css      ← Global CSS styles (with @import "tailwindcss")
│   ├── layout.tsx       ← Layout (wrapper) for all pages
│   └── page.tsx         ← Home page (/)
├── public/              ← Static files (images, fonts)
├── node_modules/        ← Installed packages (don't commit!)
├── AGENTS.md            ← Instructions for AI assistants (CLAUDE.md points to it)
├── eslint.config.mjs    ← ESLint configuration
├── next.config.ts       ← Next.js configuration
├── package.json         ← Dependencies and scripts
├── postcss.config.mjs   ← Connects Tailwind CSS
├── tsconfig.json        ← TypeScript configuration
└── .gitignore           ← Files ignored by Git

The most important files:

1. app/page.tsx - Home page

This is your application's home page (/). Every page.tsx file in the app/ folder is a separate page.

2. app/layout.tsx - Main layout

This is the wrapper for all pages - shared elements (e.g., header, footer).

3. app/globals.css - Global styles

CSS styles applied to the entire application.

4. package.json - Dependencies

List of all libraries + npm scripts.

5. postcss.config.mjs - Tailwind CSS

Connects Tailwind to the project. Tailwind 4 no longer has a tailwind.config.ts file: you set colors and fonts in app/globals.css.

Running the Project

Time to see the project in action!

Step 1: Install dependencies (if not done yet)

npm install

Step 2: Start the development server

npm run dev

You'll see:

▲ Next.js 16.3.8 (Turbopack)
- Local:         http://localhost:3000
- Network:       http://192.168.1.10:3000

✓ Ready in 2.5s

Step 3: Open in browser

Go to: http://localhost:3000

You'll see the default Next.js page!

Hot Reload - Next.js Magic

Hot Reload means that changes in code are visible instantly in the browser, without refreshing! In the Next.js docs this feature is called Fast Refresh.

Try it:

1. Open app/page.tsx in Cursor
2. Find the text "To get started, edit the page.tsx file."
3. Change it to "Ahoy, Pirates!"
4. Save the file (Cmd/Ctrl + S)
5. Look at the browser - the change will appear automatically!

This means you can code and see the results right away. Super convenient!

App Router vs Pages Router

Next.js has two versions of routing:

We use App Router - Next.js recommends it for new projects since version 13.4.

Summary

Next.js - React framework for building applications npx create-next-app - creates a new project App Router - app/ folder with routing page.tsx - individual page layout.tsx - shared layout npm run dev - starts development server Hot Reload - changes visible instantly localhost:3000 - local application address

In the next exercise you'll learn Tailwind CSS and we'll create a landing page!

See you there!

// Next.js 16 App Router - Basic page structure

export default function Home() {
  return (
    <main className="min-h-screen p-24">
      <div className="max-w-5xl mx-auto">
        <h1 className="text-4xl font-bold mb-8">
          Welcome to Next.js 16!
        </h1>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="border border-gray-300 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold mb-4">
              App Router
            </h2>
            <p className="text-gray-600">
              This is a page in the app/ folder. Each page.tsx file is a separate page.
            </p>
          </div>

          <div className="border border-gray-300 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold mb-4">
              Server Components
            </h2>
            <p className="text-gray-600">
              By default, all components in App Router are Server Components.
            </p>
          </div>

          <div className="border border-gray-300 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold mb-4">
              TypeScript
            </h2>
            <p className="text-gray-600">
              Next.js has built-in TypeScript support out-of-the-box.
            </p>
          </div>

          <div className="border border-gray-300 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold mb-4">
              Tailwind CSS
            </h2>
            <p className="text-gray-600">
              Styling through utility classes directly in JSX.
            </p>
          </div>
        </div>
      </div>
    </main>
  );
}