---
title: "Installation and Setup"
description: "Setting up a new Next.js project is quick and straightforward. You can create a fully configured project automatically using our interactive setup tool, or you can build one manually from scratch. ..."
last_updated: "2026-09-23T10:57:21.297197+00:00"
canonical_url: "https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/getting-started/installation-and-setup"
---

## Overview

### Overview
Setting up a new Next.js project is quick and straightforward. You can create a fully configured project automatically using our interactive setup tool, or you can build one manually from scratch. This guide covers both methods, configuration options, and system requirements needed to get your application running smoothly.

> [!NOTE]
> Next.js requires Node.js version `>=20.9.0`. Make sure your system meets this requirement before you begin.

---

## Automated Installation (Recommended)

### Overview
The easiest way to start a new Next.js app is by using the interactive automated tool. It sets up everything from folder structures to styling and linting configurations automatically.

### Step 1: Run the setup tool
Open your terminal and run the creation command. You can provide your project directory name directly, or run it without arguments to be prompted for a name:

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

### Step 2: Choose your configuration preferences
During the setup process, you will be prompted to choose various options for your application, such as language preferences, styling frameworks, bundlers, and directory structures. You can also pass these options directly as flags via the command line.

Supported configuration flags include:

| Flag / Option | Description |
| :--- | :--- |
| `--ts`, `--typescript` | Initialize as a TypeScript project. |
| `--js`, `--javascript` | Initialize as a JavaScript project. |
| `--tailwind` | Initialize with Tailwind CSS configuration. |
| `--app` | Initialize as an App Router project. |
| `--api` | Initialize a headless API using the App Router. |
| `--src-dir` | Initialize code inside a `src/` directory. |
| `--eslint` | Initialize with ESLint configuration. |
| `--biome` | Initialize with Biome configuration. |
| `--rspack` | Enable Rspack as the bundler. |
| `--react-compiler` | Initialize with React Compiler enabled. |
| `--empty` | Initialize an empty project template. |
| `--skip-install` | Skip automatic package installation. |
| `--disable-git` | Skip initializing a local Git repository. |

Supported package managers for bootstrapping: `npm`, `pnpm`, `yarn`, `bun`. 
> Sources: `packages/create-next-app/index.ts`, `packages/create-next-app/create-app.ts`

### Step 3: Start your development server
Once the tool finishes creating and setting up your files, move into your new project directory and start the development server:

```bash
cd my-app
npm run dev
```

---

## Manual Installation

### Overview
If you prefer to set up your Next.js project manually from scratch, follow these steps to initialize your project directory, install dependencies, and configure your scripts.

### Step 1: Create a project directory and initialize package.json
Create a new folder for your project, navigate into it, and create a basic package file:

```bash
mkdir my-app
cd my-app
npm init -y
```

### Step 2: Install required dependencies
Next.js requires React, React DOM, and the core Next package to function. Install them using your preferred package manager:

```bash
npm install next react react-dom
```

> [!WARNING]
> Next.js requires both `react` and `react-dom` to be explicitly included in the `dependencies` section of your `package.json` file. If they are missing, the server will warn you at startup.

### Step 3: Add development scripts
Open your `package.json` file and add the following scripts to allow you to develop, build, and start your application:

```json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}
```

---

## Key Concepts

- **App Router vs. Pages Router:** Next.js provides modern routing systems (App Router) and traditional routing structures (Pages Router) depending on how you configure your project files.
- **Import Alias:** By default, projects use `@/*` as an import alias shortcut to reference files relative to your root or `src/` folder. You can customize this prefix during setup.
- **Bundlers:** By default, Next.js builds applications using standard bundlers, but you can optionally enable alternative bundlers like Rspack using command flags.

---

## Troubleshooting and Diagnostics

If you encounter unexpected issues with your environment, dependencies, or package versions, you can run the built-in diagnostic tool to output system information, Node version, package manager versions, and relevant installed libraries:

```bash
npx next info
```

> [!TIP]
> Always check that your installed packages match the latest stable or canary releases if you are reporting a bug or testing new features.

## Related

- [Project Structure Overview](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/getting-started/project-structure-overview)
- [Environment and Configuration](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/configuration/environment-and-configuration)


## Sitemap

See the full [sitemap](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/llms.txt) for all pages in this wiki.