Next.js Setting Up Your First Project

Setting up a Next.js project takes less than two minutes. You need Node.js installed on your computer, and the rest is handled by a single command.

What You Need Before Starting

Node.js

Node.js is a program that runs JavaScript on your computer. Next.js needs it to work. Visit nodejs.org and download the LTS version. LTS stands for Long Term Support — it is the stable version recommended for most users.

After installing, open your terminal and check the version:

node -v

You should see a version number like v20.x.x. Anything above version 18 works fine.

A Code Editor

Visual Studio Code (VS Code) is the most popular choice for Next.js development. It is free and available at code.visualstudio.com.

Creating Your First Next.js App

Open your terminal and run this command:

npx create-next-app@latest my-app

Replace my-app with any name you want for your project. The installer will ask you several questions.

The Setup Questions Explained

Would you like to use TypeScript? → Choose No for now (beginners start with JavaScript)
Would you like to use ESLint? → Choose Yes (it catches code errors)
Would you like to use Tailwind CSS? → Choose Yes (makes styling easy)
Would you like to use the src/ directory? → Choose No (simpler structure)
Would you like to use App Router? → Choose Yes (this is the modern way)
Would you like to customize the import alias? → Choose No

Starting the Development Server

Move into your project folder:

cd my-app

Then start the development server:

npm run dev

Open your browser and go to http://localhost:3000. You will see the default Next.js welcome page. Your app is running.

Diagram: What Just Happened

YOU RAN: npx create-next-app@latest my-app
           ↓
Next.js installer downloaded all files
           ↓
YOU RAN: npm run dev
           ↓
Development server started on port 3000
           ↓
Browser → localhost:3000 → Shows your app

Understanding the Commands

npm run dev

This starts your app in development mode. Changes you make to your code appear in the browser instantly without refreshing. This mode is for building and testing your app.

npm run build

This prepares your app for production. Next.js optimizes all files, compresses images, and creates the final version of your app. Run this before deploying.

npm run start

This starts the production version of your app after you have run the build command.

The Hot Reload Feature

While the development server runs, every time you save a file, your browser updates automatically. You do not need to refresh the page manually. This feature is called Hot Module Replacement (HMR) and it saves a lot of time during development.

YOU SAVE A FILE
      ↓
Next.js detects the change
      ↓
Browser updates automatically
      ↓
You see the result in under 1 second

Key Takeaway

You need Node.js installed, then one command creates your entire project. Running npm run dev starts the local server so you can build and test your app. The setup is fast and the tooling works out of the box.