Setting Up Next.js Environment

Next.js 152 views Dec 22, 2025 2 min read

Setting up a Next.js development environment is simple and quick. Follow the steps below to get started.

Prerequisites

Before installing Next.js, make sure the following tools are installed on your system:

Node.js (version 18 or later recommended)
npm, yarn, pnpm, or bun (any one package manager)
A code editor (VS Code recommended)

To check Node.js installation:

node -v
npm -v

Step 1: Create a New Next.js Project

Use the official Next.js CLI to create a new project.

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

Or using other package managers:

yarn create next-app my-next-app

pnpm create next-app my-next-app

bun create next-app my-next-app

During setup, you will be asked to choose options such as:

TypeScript support
ESLint
Tailwind CSS
App Router (recommended)
Import alias

Step 2: Navigate to Project Folder

cd my-next-app

Step 3: Start the Development Server

npm run dev

yarn dev

The application will run at:

http://localhost:3000

Step 4: Project Structure Overview (App Router)

my-next-app/
│── app/
│   ├── page.js        // Home page
│   ├── layout.js      // Root layout
│── public/            // Static assets
│── styles/            // Global styles
│── next.config.js     // Next.js configuration
│── package.json       // Dependencies & scripts