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

Next.js is a Javascript framework that creates search engine optimized, server-side rendering, and fast react apps with zero configuration. Server-side rendering means, Next.js creates HTML with content on the server and sends it as a response to the requested URL, so users see a fully rendered HTML page in the browser. The good point of server-side rendering is that the webpage loads fast and content renders before the page loads which makes it easy for search engines to crawl and index.

Setup and Install Next.js 12 on Windows 10

There are two ways to install Next.js 12 on Windows 10. One is automatic and the second is manual. We will be installing through automatic setup which is easy and recommended by the Next.js official team.

The latest stable version of Next.js is 12. To set up and install it on Windows 10 make sure that you have installed Node.js and its version should be 12.22.0 or later. To install node.js on Windows 10 follow this tutorial.

Next, run the following command into the terminal,

pnpm create next-app

In case, you don’t have pnpm installed then it would return an error “pnpm: command not found”. To install pnpm run the following command

npm install -g pnpm

Once pnpm is installed successfully, run the first command, which creates the Next.js app. It will ask you for the project name which can be anything. If the project name has more than one word then it is better to add hyphens between to make it readable. Sometimes, it takes a few seconds to complete it.

After following these steps, you should have Next.js 12 installed with the latest version on your Windows 10.

Check the Next.js App Version

Run the below command into the git bash terminal to check out the installed Next.js version

npx next -v

It would return the version of your Next.js app, following is an example response,

Next.js v12.2.0

There is one more way to check out the version which is the package.json file. Next.js keeps the package.json file in the root directory and contains a JSON array. In the array, the next object value shows the version which you can find under the dependencies array.

Run the Next.js app on Windows 10

To run the Next.js app in the browser, open git bash and run the below command

npm run dev

This command starts the development server. Once the command run, go to the browser and open the following link

http://localhost:3000/

The development server serves the Next.js app on this URL.