is the open-source web development framework use to generate static websites and also allows server-side rendering for React-based web applications. Next.js 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 . Make sure that you can download the LTS version only which is stable. here 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 folder. nextjs-setup 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 menu. You can see the l option there. Click on that. Terminal New Termina 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 file in the directory. package.json 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 it. save ‎ : { : , : , : },
‎ "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 folder and file pages index.js You can see in the below image there are two icons highlighted by me (the first is a and the second is a ). Select NEXTJS-SETUP and create the “ folder first. new file new folder pages” After that select the “pages” folder and click on the and create inside the “pages” folder. new file index.js 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 { ( <h1>Hello World</h1> );
} Page; ( ) function Page return < > div </ > div export default 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 . Put this URL in the browser and hit enter. You should see the below page. That’s it. 🙂 http://localhost:3000 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/

Keep

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Tips For Junior Developers To Succeed in Code

25 Useful Websites Developers Don't Use Enough

17 Most Popular Tools For React Developers

3 Key Questions You Need To Answer Before You Push That Code

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Tips For Junior Developers To Succeed in Code

25 Useful Websites Developers Don't Use Enough

17 Most Popular Tools For React Developers

3 Key Questions You Need To Answer Before You Push That Code

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps