Starting a New Project
We'll create a Next.js project — one of the most popular frameworks for building modern web applications. Don't worry if that sounds technical; Cursor will handle the complexity.
To create your project:
- Open Terminal in Cursor (View → Terminal)
- Navigate to where you want to store projects
- Run: npx create-next-app@latest my-first-app
- Accept the default options when prompted
- Open the new folder in Cursor
Understanding the File Structure
Every Next.js project has a similar structure. Here are the key folders you'll work with:
Key folders:
- src/app/ — Your pages and layouts live here
- public/ — Images and static files
- package.json — Lists your project's dependencies
- next.config.js — Configuration for Next.js
Running Your App Locally
Let's see your app in action. This starts a local development server.
To run your app:
- Open the terminal in Cursor
- Run: pnpm dev
- Open http://localhost:3000 in your browser
- You should see the default Next.js welcome page
The development server auto-refreshes when you make changes. Leave it running while you work.
Making Your First Change
Let's modify the homepage using AI. Open src/app/page.tsx and try this:
First AI edit
Modify Homepage
Replace the content of this page with a simple landing page that says 'Hello World' with my name underneath. Use Tailwind CSS for styling.