How to set up the Next Js project in easy steps

What is NEXT JS?

Next.js is a robust React framework that offers many advantages over traditional React applications. Its server-side rendering, automatic code splitting, static site generation, and flexible routing system make it an excellent choice for building highly performant and scalable web applications. Before wasting any time, let’s move towards setting up Next Js. First of all, what you need is the following:

1. Node js
2. IDE

Installing Node Js:

Installing Node Js is a simple visit node js site, which’ll look somewhat like this:

-> Select your Windows architecture (32bit or 64bit) or you can directly click on the type of your OS and it’ll start downloading.

This setup file will be available in your downloads. Double-click to open it, and it will show you this pane:

→ Click Next.
→ Accept the agreement and click Next.
→ It will ask you to download the chocolatey, don’t check the checkbox, and move on by clicking Next.
→ Click Next in the new pane that appeared as well, and it’ll start the installation of Node Js.
→ To verify that Node Js has been installed successfully. Press the Win logo key and write “cmd”. → Open cmd.

It’ll give you this kinda display:

→ Type “node -v”; if you see this:

or the version of Node js, it means Node Js has been installed successfully.

Integrated Development Environment (IDE)

IDE is used to develop software, web apps, and applications. The most recommended lightweight IDE is “vs code” which we will be using throughout this blog. You can install it from here.

Setting up Next Js

To set up Next Js, follow these steps:

1. Go to any disk in “This PC”.
2. Create an empty folder by pressing “Ctrl+Shift+N”. Give this folder any name.
3. Open the folder, in the path, type “cmd” like this:

and hit enter, it’ll open cmd in this folder.

4. Now to create the Next project, type

npx create-next-app project_name

and hit enter.

Next, it’ll ask several questions regarding the project.

5. We’ll use TypeScript, ESLint (A JavaScript IntelliSense), TailwindCSS, src, experimental app directory, and import alias.

6. After that, the project will be created.

Running the Next Js Project

As soon as the project is created, type “cd project_name (here webapp)”. Next type, “code .” this will open vs code in this directory.

After the vs code is opened, return to the cmd, and type “npm run dev”. It’ll run this web app at port 3000: “localhost::3000”. Type this, URL in your browser and it’ll show you the main page of Next Js from where you can start.