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 setup 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 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 which helps JavaScript programming language to run and execute on server. You can download Node.js according to your system requirements from here. Make sure that you can download LTS version only which is stable.
Step 3: Create Empty Directory
Create empty folder/directory in you local drive (C:, E:, D: or any) and add that to Visual Studio Code.
Open new Window in VS Code. Click on open folder.
Then, select and add empty folder which you have created. I have created nextjs-setup folder.
After selecting 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 Terminal menu. You can see New Terminal option there. Click on that.
You can see below, it will open terminal for path in which you have created empty folder and which is also your root folder.
Step 5: Initialize Project
Execute below command to initialize the project. Below command will automatically create package.json file in the directory.
Type below command and hit enter.
Command:
npm init -y
package.json file is created.
Step 6: Install Next.js
Use following command to install next.js.
Command:
npm install react react-dom next –save
Hit enter and you will get below screen after installation is complete.
Step 7: Make Changes in package.json
You can see below code in the package.json file.
Replace above code with below one and save.
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
Read below before moving to 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 (first is new file and second is new folder). Select NEXTJS-SETUP and create “pages” folder first.
After that select “pages” folder and click on new file and create index.js inside “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 run on the next.js framework.
Command:
npm run dev
You can see below result:
You website is ready to run on http://localhost:3000. Put this url in the browser and hit enter. You should see below page. That’s it.😀
Conclusion:
Express.js makes developer’s work easy by providing functionality to create API’s, sending http requests and routing. So it will be easy for developers to keep concentrate on developing web application faster without worrying about common setup things required.
This article is also published on : https://hackernoon.com/vs-code-tutorial-how-to-set-up-a-reactjs-project-with-nextjs-312f350f