Setting Up a Next.js Project

Next.js is a framework that makes it easy to build websites and web applications. Think of it as a set of tools and templates that handle the complex technical setup for you, so you can focus on building your actual project.

Prerequisites

Before we begin, make sure you have Node.js installed on your system. You can download it from nodejs.org.

Create Your Project

1. Open Your Editor

Open Cursor (or your preferred editor) and create a new folder for your projects if you haven't already.

2. Run the Create Command

Open a terminal and run:

npx create-next-app@latest my-app

Replace my-app with your project name.

3. Choose Your Configuration

When prompted, select these recommended options:

✓ 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? (recommended) › Yes
✓ Would you like to use Turbopack for next dev? › Yes
✓ Would you like to customize the import alias? › No

Why these options?

• TypeScript: Catches errors before they happen
• ESLint: Keeps your code clean and consistent
• Tailwind CSS: Style without writing CSS files
• App Router: The modern, recommended routing system
• Turbopack: Faster development builds

4. Navigate to Your Project

cd my-app

5. Install Dependencies

pnpm install

Or use npm install if you prefer npm.

6. Start the Development Server

pnpm dev

7. View Your Application

Open http://localhost:3000 in your browser. You should see the Next.js welcome page.

Clean Up the Starter Template

The default template includes demo content you'll want to remove.

Using AI

In your AI editor's chat, type:

Remove all the demo content from the homepage and give me a clean starting point with just a centered heading that says "Hello World"

Manual Cleanup

Or edit app/page.tsx yourself:

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <h1 className="text-4xl font-bold">Hello World</h1>
    </main>
  )
}

Clean Up Public Assets

Delete the placeholder SVG files in the public folder—you won't need them.

What You Just Created

Your Next.js project now has:

my-app/
├── app/
│   ├── layout.tsx    # Root layout (wraps all pages)
│   ├── page.tsx      # Homepage (/)
│   └── globals.css   # Global styles
├── public/           # Static files (images, etc.)
├── package.json      # Dependencies
├── tailwind.config.ts # Tailwind configuration
└── tsconfig.json     # TypeScript configuration

Key files:

• app/layout.tsx - The template that wraps every page
• app/page.tsx - Your homepage at /
• app/globals.css - Global styles including Tailwind

Summary

You've created a Next.js project with:

• TypeScript for type safety
• Tailwind CSS for styling
• ESLint for code quality
• App Router for modern routing
• Turbopack for fast development

Next Steps

Learn what Next.js is and why AI tools love it in the next lesson.