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 Termina_l 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.

The package.json file is created.

Step 6: Install Next.js

Use the following command to install next.js.

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.

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.

Step 10: Launch Website

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

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. 🙂

#web-development #react #nextjs #coding