How to setup a project in Next.js

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.

Checkout more articles on ReactJS

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

Setup environment
Create package.json and install dependencies
Update scripts in package.json
Create index.js file
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.

node -v (OR node --version)

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

https://nodejs.org

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.

npm init -y

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

npm install next react react-dom

3. Update scripts in package.json

Update list of below scripts in package.json.

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

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

{
  "name": "first-next-app",
  "version": "1.0.0",
  "description": "This is the first Next.js application",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "Clue Mediator",
  "license": "ISC",
  "dependencies": {
    "next": "^9.2.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

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

const Index = () => <h1>Welcome to the First Next.js Application</h1>

export default Index;

5. Run project

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

npm run dev

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

Output - How to setup a project in Next.js - Clue Mediator