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
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.
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.
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.
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.
Be the first to reply