Setup & Project Structure — Next.js Complete Guide

Installation

Terminal — create your first Next.js project

bash

# Step 1: Verify Node.js is installed (need version 18.17 or newer)
node --version

# Step 2: Create a new project (this downloads and sets everything up)
npx create-next-app@latest my-app

# You'll be asked a few questions. Choose these:
# ✔ TypeScript? → No  (keep it simple for now)
# ✔ ESLint? → Yes     (helps catch errors)
# ✔ Tailwind CSS? → Yes
# ✔ App Router? → Yes (this is the modern approach)
# ✔ Customise import alias? → No

# Step 3: Enter the project and start the dev server
cd my-app
npm run dev

# Open http://localhost:3000 — your app is running!

What all the files and folders mean

Project structure overview

text

my-app/
├── app/                    ← Everything starts here — your pages live in this folder
│   ├── page.jsx            ← The homepage (URL: /)
│   ├── layout.jsx          ← Root layout — wraps every page (navbar, footer)
│   └── about/
│       └── page.jsx        ← About page (URL: /about)
│   └── api/
│       └── hello/route.js  ← A backend API endpoint (URL: /api/hello)
│
├── public/                 ← Static files — images, fonts, icons
├── components/             ← Your reusable components (you create this folder)
├── next.config.js          ← Next.js settings
├── tailwind.config.js      ← Tailwind CSS settings
└── package.json            ← Project metadata and dependencies

ANALOGY

Real-world analogy: A filing cabinet. Think of the app/ folder like a perfectly organised filing cabinet. Each drawer is a URL path. Each folder inside app/ becomes a segment of the URL. The page.jsx inside each folder is what gets displayed. The structure of the folders IS the structure of your website.

The four key npm commands

Commands you'll use every single day

bash

npm run dev      # Start development server — hot reload, instant updates on save
npm run build    # Compile everything for production deployment
npm run start    # Start the production server (after building)
npm run lint     # Scan your code for problems and style issues

TIP

Hot Reload. When you save a file while npm run dev is running, the browser updates instantly — no manual refresh needed. This tight feedback loop makes development much faster.