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. It's the most popular choice in 2024.

Why Next.js?

• 🚀 Fast - Server-Side Rendering (SSR)
• 🎨 Easy - Routing, API routes, styling out-of-the-box
• 📱 SEO - Great for search engines
• 🔥 Hot Reload - Changes visible instantly
• 💎 Used by - Netflix, TikTok, Twitch, Uber

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:

1How to create a new Next.js 14 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:

1npx create-next-app@latest my-app --typescript --tailwind --app --eslint

Step 4: Run in terminal

1. Open terminal (Cmd/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 setup questions

The installer will ask about a few things:

1✔ What is your project named? › krakens-call
2✔ Would you like to use TypeScript? › Yes
3✔ Would you like to use ESLint? › Yes
4✔ Would you like to use Tailwind CSS? › Yes
5✔ Would you like to use `src/` directory? › No
6✔ Would you like to use App Router? › Yes
7✔ Would you like to customize the default import alias? › No

Your answers:

• Project name:

  krakens-call

  (or any name you like)
• TypeScript: Yes ✅
• ESLint: Yes ✅
• Tailwind CSS: Yes ✅
• src/ directory: No ❌
• App Router: Yes ✅ (the most important one!)
• Import alias: No ❌

Step 6: Wait (~1-2 minutes)

npm will download all packages. You'll see:

1Creating a new Next.js app in /path/to/krakens-call...
2
3Installing packages. This might take a couple of minutes...
4
5Success! Created krakens-call at /path/to/krakens-call

Opening the Project in Cursor

Method 1: Via terminal

1cd krakens-call
2code .

(

code .

opens Cursor in the current folder)

Method 2: Via Cursor

1. File → Open Folder
2. Select the

   krakens-call

   folder
3. Click "Open"

Next.js 14 Project Structure

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

1krakens-call/
2├── app/                  ← Main application folder (App Router)
3│   ├── layout.tsx       ← Layout (wrapper) for all pages
4│   ├── page.tsx         ← Home page (/)
5│   └── globals.css      ← Global CSS styles
6├── public/              ← Static files (images, fonts)
7├── node_modules/        ← Installed packages (don't commit!)
8├── package.json         ← Dependencies and scripts
9├── tsconfig.json        ← TypeScript configuration
10├── tailwind.config.ts   ← Tailwind CSS configuration
11├── next.config.js       ← Next.js configuration
12└── .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.

tailwind.config.ts

- Tailwind CSS

Tailwind configuration (colors, fonts, breakpoints).

Running the Project

Time to see the project in action!

Step 1: Install dependencies (if not done yet)

1npm install

Step 2: Start the development server

1npm run dev

You'll see:

1▲ Next.js 14.0.0
2- Local:        http://localhost:3000
3- Environments: .env.local
4
5✓ 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!

Try it:

1. Open

   app/page.tsx

   in Cursor
2. Find the text "Get started by editing"
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:

| Feature | Pages Router | App Router | |---------|--------------|------------| | Folder |

pages/

|

app/

| | Next version | 12 and lower | 13+ | | Status | Legacy | New standard ✅ | | Server Components | ❌ | ✅ | | Layouts | Difficult | Easy |

We use App Router - it's the new standard since Next.js 13/14.

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! 🚀