How to install Next.js

Step by step instructions to get started with Next.js

⭐️ 👀 2023 WEB DEVELOPMENT BOOTCAMP starting in days! Join the waiting list to reserve your spot in my 10-weeks cohort course and learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much much more! 👀 ⭐️

To install Next.js, you need to have Node.js installed.

Make sure that you have the latest version of Node. Check with running node -v in your terminal, and compare it to the latest LTS version listed on

After you install Node.js, you will have the npm command available into your command line.

If you have any trouble at this stage, I recommend the following tutorials I wrote for you:

Now that you have Node updated to the latest version and npm, create an empty folder anywhere you like, for example in your home folder, and go into it:

mkdir nextjs
cd nextjs

and create your first Next project

mkdir firstproject
cd firstproject

Now use the npm command to initialize it as a Node project:

npm init -y

The -y option tells npm to use the default settings for a project, populating a sample package.json file.

npm init result

Now install Next and React:

npm install next react react-dom

Your project folder should now have 2 files:

and the node_modules folder.

Open the project folder using your favorite editor. My favorite editor is VS Code. If you have that installed, you can run code . in your terminal to open the current folder in the editor (if the command does not work for you, see this)

Open package.json, which now has this content:

  "name": "mysite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies":  {
    "next": "^9.1.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"

and replace the scripts section with:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"

to add the Next.js build commands, which we’re going to use soon.

the package.json file

Now create a pages folder, and add an index.js file.

In this file, let’s create our first React component.

We’re going to use it as the default export:

const Index = () => (
    <h1>Home page</h1>

export default Index

Now using the terminal, run npm run dev to start the Next development server.

This will make the app available on port 3000, on localhost.

npm run dev

Open http://localhost:3000 in your browser to see it.

The first Next app screen

One more thing! ⚠️ ✋

At the end of January I will organize the Web Development Bootcamp.

It's a 10-weeks long cohort online course where I will guide you to becoming a Web Developer.

It's not "just a course". It's a big event I organize once a year.

We'll start from zero, learn the fundamentals of Web Development, HTML CSS, JavaScript, Tailwind, Git, using the command line, VS Code, GitHub, Node.js, we'll then learn React, JSX, how to use PostgreSQL, Astro, Next.js, Prisma, deploying on Netlify/DigitalOcean/Fly/Vercel and much more! 

At the end of the first 10 weeks you'll know how to create web sites and web applications and I'll unlock you the 2nd phase of the Bootcamp: you will get access to a large number of projects exclusive to the Bootcamp graduates, so you can follow my instructions to build things like private areas with authentication, clones of popular sites like Twitter YouTube Reddit, create e-commerce sites, and much much more.

Because once you got the fundamentals, you only learn by working on real, exciting projects.

To find out more, visit