VS Code Tutorial: How To Set Up A React.js Project With Next.js

Next.js is the open-source web development framework use to generate static websites and also allows server-side rendering for React-based web applications.

Let’s see how to set up react project with next.js.

Requirements:

Visual Studio Code
Node.js
Next.js
Basic React & JavaScript Knowledge

Step 1: Install Visual Studio Code

Visual Studio Code is a free and open-source code editor which runs smoothly on Windows, Linux, and macOS. You can download it from here.

Step 2: Install Node.js

Node.js is a JavaScript runtime that helps JavaScript programming language to run and execute on servers. You can download Node.js according to your system requirements from here. Make sure that you can download the LTS version only which is stable.

Step 3: Create Empty Directory

Create an empty folder/directory in your local drive (C:, E:, D: or any) and add that to Visual Studio Code.

Open new Window in VS Code. Click on the open folder.

Then, select and add the empty folder which you have created. I have created nextjs-setup folder.

After selecting the window you can see it is added to VS code.

Step 4: Open Terminal for Empty Folder

Go to the Menu Bar and Click on the Terminal menu. You can see the New Terminal option there. Click on that.

You can see below, it will open a terminal for the path in which you have created an empty folder and which is also your root folder.

Step 5: Initialize Project

Execute the below command to initialize the project. The below command will automatically create a package.json file in the directory.

Type below command and hit enter.

Command:

npm init -y

The package.json file is created.

Step 6: Install Next.js

Use the following command to install next.js.

Command:

npm install react react-dom next –save

Hit enter and you will get the below screen after installation is complete.

Step 7: Make Changes in package.json

You can see the below code in the package.json file.

Replace the above code with the below one and save it.

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

Read the below paragraph before moving to the next step,

Next.js has file based routing. Any JavaScript file which you put into /pages directory will get executed. Also, index.js is the default file runs when user access root (home page) of the website.

Step 8: Create pages folder and index.js file

You can see in the below image there are two icons highlighted by me (the first is a new file and the second is a new folder). Select NEXTJS-SETUP and create the “pages” folder first.

After that select the “pages” folder and click on the new file and create index.js inside the “pages” folder.

Step 9: Put sample code in index.js

Put below react code in index.js file which returns simple Page component. Don’t forget to save.

function Page(){
    return (
        <div>
           <h1>Hello World</h1> 
        </div>
    );
}
export default Page;

Step 10: Launch Website

Type below command to lunch website which runs on the next.js framework.

Command:

npm run dev

You can see the below result:

Your website is ready to run on http://localhost:3000. Put this URL in the browser and hit enter. You should see the below page. That’s it. 🙂

Conclusion:

Express.js makes developer's work easy by providing functionality to create APIs, sending HTTP requests, and routing. So it will be easy for developers to keep concentrate on developing web applications faster without worrying about common setup things required.

Previously published at https://www.tutorialfunda.com/reactjs/setup-react-js-project-with-next-js-vs-code/