How to Install and Setup a Next.js App on Windows 10

The combination of React.js and the Create-react-app tool is the best for creating any web application. But when coming to production-ready web applications, it will give us a painful experience. Here, we have a framework built on top of the React.js library that helps us to build production-ready web apps. Here we are going to see the steps to install and setup a Next.js app on Windows 10.

What is Next.js and it’s features?

Next.js is a React framework to build production-ready web applications. The main feature of the Next.js framework over the React.js library is built-in Server-Side Rendering(SSR).

Server-Side Rendering: The React app we build will only work after loading a bundle from the server to the browser. The user feels a waiting period at this time. After loading the bundle, it works, greater.

This process is good for web apps that do not need SEO benefits. But for web apps like E-commerce, Portfolio, etc. will suffer from this process.

Because Google, and other search engines, need to crawl the web pages frequently to show the result. But At the time of this crawling process, our React app returns a blank page without any data in it.

Here, Server Side Rending(SSR) will give the benefit of rending the pages from the server and returning the HTML page to a browser. It does not need to download the bundle.

TypeScript Support: Another benefit of using the Next.js framework is its TypeScript support. It enables the features like type checking OOP concepts etc.

Route pre-fetching: This is one of the best features to code the entire app without defining the routes in a root file. It contains a directory called pages and any file/folder inside it consider as a route. This is the same concept PHP programmers use.

How to install and setup a Next.js app on Windows 10

There is no need to install a tool in on our system to build a Next.js project other than Node.js and NPM.

1. Install Nodejs

Node.js actually provides a runtime environment to execute JavaScript code from outside a browser. NPM, the default package manager for Nodejs is used for managing and sharing the packages for any JavaScript project. React uses Node.js and NPM for the management of dependencies and runtime.

So first, it needs to install Nodejs on our system. NPM will be installed with Nodejs. The current stable version of Node.js can be downloaded and installed from the official website that is given below.

https://nodejs.org

Download the latest version and install it. Here we can choose the LTS or the latest version. Because both of the version supports Next.js.

After the installation, check the versions using the below commands from your command prompt.

node -v
npm -v

This will show the installed versions of Node.js and NPM.

Note:- If you are really a beginner in this field, the guide Steps to install Node.js and NPM on Windows 10 will help you.

2. Create a new Next.js project

It is easy to create a Next.js app using the NPX tool. Open your command prompt and execute the commands below.

Note: Other than using command prompt, in the Next.js page recommend downloading Git for Windows and use Git Bash that comes with it, which supports the UNIX-specific commands in this tutorial. Windows Subsystem for Linux (WSL) is another option.

But here, we are using the command prompt to create a Next.js app.

npx create-next-app first-project

The command generates a Next.js app with the name first-project.

If we have installed NPM and YARN on your system, we have to specify which is to be used to generate the Next.js app by the below command.

npx create-next-app first-project --use-npm

If we need an example template to get an idea about the Next.js app file structure, use the below command.

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

4. Running the application

So the app we created can run locally on our system with the npm run dev command.

cd first-project
npm run dev

This will opens up the Next.js application in a new tab of our browser with the below URL.

http://localhost:3000

Note:- If port 3000 is busy with another process, the app will start in port 3001 or any other port available.

Note: We recommend using Visual Studio code as the source-code editor for working with React projects.

Summary

So, in this article, we have discussed the steps to Install Next.js on a Windows 10 system. These steps are verified by our team and 100% working.