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 https://nodejs.org/.

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": "airbnbclone",
  "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 = () => (
  <div>
    <h1>Home page</h1>
  </div>
)

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

Edit this page


Here's my latest YouTube video. I talk about why I think that dogs are a great help for developers working remotely: