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