Address
304 North Cardinal St.
Dorchester Center, MA 02124

Work Hours
Monday to Friday: 7AM - 7PM
Weekend: 10AM - 5PM

Create a NextJS project from scratch in 7 steps

NextJS project

NextJS is a popular open-source React-based web framework Used by some of the world’s largest companies, NextJS enables you to create full-stack Web applications by extending the latest React features and integrating powerful Rust-based JavaScript tooling for the fastest builds.

To create a NextJS project, you will require a few things, such as:

  • NodeJS: Next.js is built on top of Node.js, so you’ll need to have it installed on your machine.
  • IDE: An Integrated development environment (IDE) to write your code. Many options are available, such as Visual Studio Code, Sublime Text, Atom, or WebStorm.
  • Basic knowledge of HTML, CSS, and JavaScript: NextJS is a web framework you need to know the basics of web development technologies.

Let’s get started with step 1:

1. Install NodeJS

You need to install node JS on your machine if it is not already installed, the best way to download and install it is from its official website https://nodejs.org/en/.

  • Once you click on the given link above, you will see this interface. click on the Download button “Recommended For Most Users”. Your node JS exe file will be downloaded.
  • Go to folders where your node JS exe file is downloaded and click on it to install it.
  • On clicking the downloaded .exe file an interface with the “Next” button option will pop up. Click on it.
  • After that, accept the terms and click on the “Next” button.
  • Select the location where you want it to be installed by clicking on “change…”. (C:\Program Files\ is preferable), then click on the “Next” button.
  • After that for this screen below, just click on the “Next” button.
  • After that for this screen below, just click on the “Next” button.
  • Once this screen will be shown, click on the “Install” button to start installing, once it will be installed click on the “Finish” button to end this process.
  • To check whether the node JS has been installed on your machine, go to the command prompt and type the given command, and press enter:
node -v
  • If it will show you the version of node JS, like in the screen below then it has been installed. else it will show you the error of “not recognizing the command” and in that case repeat the installation process.

2. Create a new project directory.

  • Create a new folder in your computer wherever you want to and open that created folder by clicking on it.

3. Open the command prompt

  • Click on the address bar, select all(Ctrl + A), type cmd and press enter.

4. Create a NextJS project

  • Once the command prompt is open type the following command and press enter
npx create-next-app@latest <project_name>
  • In case you are working with typescript use the command below and press enter
npx create-next-app@latest --typescript <project_name>
  • Once the project is completed you will see

5. Open the NextJS project in your VSC

  • Once the NextJS project is created, move it to the project directory by running the command
cd <project_name>
  • After that run the below command, it will open your project in the visual studio code.
code .

6. Write code in the NextJS project

  • You can skip this part and move to step 7 in case you want to run the development server only without writing your own code.
  • In your NextJS project, there will be a file with the name page.jsx or page.tsx in case of a typescript project, open that file you will see already some code in it.
  • remove the following part of the code
  • Add your own code. For example:
<div>
   <h1>Hello World</h1>
</div>

7. Run the development server

  • To run the development server, open the visual studio code terminal from the menu or by pressing Ctrl + J, and a terminal will be displayed
  • Type the following command in the terminal and press enter to run
npm run dev
  • Once the command starts running you will see the following line under the command you entered, there will be a link of http://localhost:3000 open that link by clicking on it while pressing Ctrl.
  • It will open up a web page which is the main page of your next application. you will see the following UI in your browser if you have changed your code according to step 6.
  • Else You will the following UI

That’s all to create a NextJS project and open it in the visual studio code. After this, you can write your own code for this project. To learn how to create the routes in the NextJS project, check out “Create NextJS routes in project“