Install Next.js

In this tutorial, I will cover how to install Next.js, create your first project, understand the folder structure, and run your application.

1. Install Node.js

Before installing Next.js, you must install Node.js on your computer. Next.js requires Nodejs version should be 18 or higher.

1. Install Node.js

If you have not installed Node.js then you can visit official website
Visit the official website: https://nodejs.org and You have to download LTS version for stability.

2. Verify Installation of Node.js

After installation, you can verify that Node.js is installed or not through below command.


node -v
npm -v

2. Create a Next.js App

create a project through below command


npx create-next-app@latest

You will be asked a few setup questions such as:

Project name
TypeScript (Yes/No)
ESLint (Yes/No)
Tailwind CSS (Yes/No)
App Router (Yes – recommended)
src/ directory (optional)
Import alias (optional)

Recommended Settings for Beginners

TypeScript → No (optional)
ESLint → Yes
Tailwind → Yes
App Router → Yes
src/ folder → No

3. Project Folder Structure

After installation, your Next.js project looks like this:


my-next-app/
│
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.js
│   └── page.js
│
├── public/
│   └── images...
│
├── package.json
├── next.config.js
├── .eslintrc.json
└── README.md

Explanation of Important Folders

app folder: It is a main Directory of the projects which has all pages, components and layouts etc.
public folder: It stores static files such as images, icons, etc.
package.json: Lists all dependencies and scripts.
next.config.js: It is used to configure Next.js features like images, redirects, compression, etc.
globals.css: It contains global-level styling for the whole app.

How to Run a Next.js Project?

After creating a project, run below commands.

1. Go to your project folder


cd my-next-app

2. start the development server


npm run dev

3. Now, run the url.


http://localhost:3000

Install Next.js – Interview Questions

Q 1: How do you install Next.js?

Ans: Using npx create-next-app@latest.

Q 2: What are the prerequisites for installing Next.js?

Ans: Node.js version 18+ and npm or yarn.

Q 3: Does Next.js support Yarn and pnpm?

Ans: Yes, Next.js supports npm, yarn, pnpm, and bun.

Q 4: What files are created during installation?

Ans: app/ or pages/, next.config.js, package.json, and public/.

Q 5: How do you start a Next.js project?

Ans: By running npm run dev.