🛠️ Setting Up Next.js

Installing Next.js is quick and easy. You'll need Node.js installed on your computer, then run one simple command to create your first Next.js application.


# Create a new Next.js app
npx create-next-app@latest my-app

Prerequisites

📦

Node.js

Version 18.17 or higher required

Download from nodejs.org

💻

Code Editor

VS Code recommended for best experience

VS Code WebStorm

🖥️

Terminal

Command line interface for running commands

Built-in Terminal

🌐

Browser

Modern browser for testing your app

Chrome Firefox

🔹 Installation Steps

Follow these simple steps to create your first Next.js application. The setup wizard will guide you through configuration options, making it easy even for beginners.

Step 1: Create New App

npx create-next-app@latest my-first-app

Step 2: Answer Setup Questions

Would you like to use TypeScript? → No (for beginners)
Would you like to use ESLint? → Yes
Would you like to use Tailwind CSS? → Yes
Would you like to use `src/` directory? → No
Would you like to use App Router? → Yes
Would you like to customize the default import alias? → No

Step 3: Navigate to Project

cd my-first-app

Step 4: Start Development Server

npm run dev

🔹 Verify Installation

After running the development server, open your browser and visit the local development URL to see your new Next.js app running successfully.

# You should see this message in terminal:
- Local:        http://localhost:3000
- Ready in 2.5s

Browser Output:

Welcome to Next.js!

Get started by editing app/page.js

🔹 Project Structure Overview

After installation, your project will have this basic structure. Don't worry about understanding everything now - we'll explore each part in detail later.

my-first-app/
├── app/
│   ├── page.js          # Home page
│   ├── layout.js        # Root layout
│   └── globals.css      # Global styles
├── public/              # Static files
├── node_modules/        # Dependencies
├── package.json         # Project config
└── next.config.js       # Next.js config

🔹 Basic Commands

These are the essential commands you'll use regularly when developing with Next.js. Each command serves a specific purpose in your development workflow.

Development Commands:

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linting
npm run lint

🔹 Your First Edit

Let's make a simple change to verify everything works. Open the main page file and modify the content to see live updates in your browser.

// app/page.js
export default function Home() {
  return (
    <main>
      <h1>My First Next.js App</h1>
      <p>I just installed Next.js!</p>
    </main>
  )
}

Output:

My First Next.js App

I just installed Next.js!

🔹 Troubleshooting

If you encounter issues during installation, here are common solutions:

Common Issues:

Port 3000 already in use: Close other apps using port 3000 or use a different port with npm run dev -- -p 3001
Node version error: Update Node.js to version 18.17 or higher
Permission errors: Try running terminal as administrator
Installation fails: Clear npm cache with npm cache clean --force

Installation & Setup