Tutorials Projects Interview Roadmaps Compiler
Login Start Learning

Next.js Installation and Setup Guide

Next.js is one of the most popular React frameworks for building modern web applications. Developed by Vercel, Next.js provides powerful features such as Server-Side Rendering (SSR), Static Site Generation (SSG), API routes, image optimization, file-based routing, and excellent performance out of the box.

Whether you're building a personal blog, an e-commerce platform, a SaaS application, or an enterprise website, Next.js offers the tools needed to create fast, scalable, and SEO-friendly applications.

In this guide, you'll learn how to install Next.js, set up a new project, understand the project structure, and run your first application.

Prerequisites

Before installing Next.js, ensure you have the following installed:

  1. Node.js (version 18.18 or later recommended)
  2. npm, yarn, pnpm, or bun package manager
  3. Basic knowledge of JavaScript and React

You can verify your installation by running below code in your teminal:

node -v
npm -v

Expected output:

v20.x.x
10.x.x

Installing Next.js

The easiest way to create a new Next.js application is by using the official create-next-app tool.

Run the following command:

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

Alternatively:

Using Yarn:

yarn create next-app my-next-app

Using PNPM:

pnpm create next-app my-next-app

Using Bun:

bun create next-app my-next-app

Setup Options During Installation

When you run the installation command, you'll be prompted with several options:

  ✔ Would you like to use TypeScript? Yes 
✔ Would you like to use ESLint? Yes 
✔ Would you like to use Tailwind CSS? Yes 
✔ Would you like your code inside a src/ directory? Yes 
✔ Would you like to use App Router? Yes 
✔ Would you like to use Turbopack? Yes 
✔ Would you like to customize the import alias? No

Recommended choices:

Option Recommendation
TypeScript Yes
ESLint Yes
Tailwind CSS Yes
src Directory Yes
App Router Yes
Turbopack Yes

Navigate to the Project Directory

After installation completes:

cd my-next-app

Your project structure will look similar to:

my-next-app/
├── public/
├── src/
│   ├── app/
│   │   ├── page.js
│   │   ├── layout.js
│   │   └── globals.css
│   ├── components/
│   └── lib/
├── package.json
├── next.config.js
└── README.md

Running the Development Server

Start the development server:

npm run dev

Or:

yarn dev

Or:

pnpm dev

Open your browser and visit:

http://localhost:3000

You should see the default Next.js welcome page.

Building for Production

Create an optimized production build:

npm run build

Start production server:

npm start

Next.js generates optimized assets and performs code splitting automatically.

Deploying a Next.js Application

The easiest deployment option is Vercel.

Steps:

  1. Push code to GitHub.
  2. Create a Vercel account.
  3. Import your repository.
  4. Deploy with one click.

Alternative deployment platforms:

  • Netlify
  • AWS
  • DigitalOcean
  • Railway
  • Render

Common Next.js Commands

Command Purpose
npm run dev Start development server
npm run build Create production build
npm run start Run production server
npm run lint Run ESLint
npm install Install dependencies

By following this installation and setup guide, you now have a solid foundation for building modern web applications using Next.js. From creating your first project to deploying it in production, Next.js provides everything needed to build fast, SEO-friendly, and scalable websites.

Next Article ❯