Today we will show you how to setup a project in Next.js. It’s the first article of the Next.js where we will teach you the steps to initialize the Next.js project from scratch.

How to create a project in Next.js, Getting started with Next.js, Install next.js, create website with next js, Setting Up a Next.js Project, How to create a website with Next.js and React, Manual setup the Next.js.

What is Next.js

Next.js is the open source react framework which helps us to create static, dynamic and web applications. It’s used for server rendered applications, SEO website, PWA and many more.

Find more about the Next.js

Steps to setup a project in Next.js

1. Setup environment
2. Create package.json and install dependencies
3. Update scripts in package.json
4. Create index.js file
5. Run project

1. Setup environment

To work with the next application, first you have to install Node JS.

Run below command in command-line interface to check Node JS exists in your system. You can also get the version of node via the command below.

If you get an error message like “node is not defined” then you have to install node using the link below.

2. Create package.json and install dependencies

To create an application in Next.js, you have to initialize the project with the help of package.json. In order to create package.json, first create an empty directory name as first-next-app and run the below command in the project directory.

Now let’s install next, react and react-dom in your project via the command below.

3. Update scripts in package.json

Update list of below scripts in package.json.

• dev next – Start Next.js project in development mode.
• build next build – Build the application for production usage.
• start next start – Start the Next.js production server.

After updating the scripts in package.json file, it will display the look like below.

package.json

4. Create index.js file

Let’s create a new directory name as pages in the project directory. Now create index.js file in the pages directory.

pages/index.js

5. Run project

Execute the below command to run the project in development mode.

Now hit http://localhost:3000 in the browser and you can see the output like below.