Let's start with installing Next.js

The first thing we’re going to do is.. we’re going to install Next.js!

You need to have Node.js installed. Check out my how to install Node.js post if you don’t have it already! mkd And make sure it’s the latest version (see how to update Node.js).

Installing Node.js will make the npm command available into your command line.

If you are new to using the command line, recommend reading An introduction to the npm package manager, the Unix Shells Tutorial, How to use the macOS terminal and The Bash Shell.

Now that you have npm, create an empty folder anywhere you like, for example in your home folder, and go into it:

mkdir nextbnb
cd nextbnb

and then 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.

Now install Next and React:

npm install next react react-dom

Your project folder should now have 2 files:

• package.json (see my tutorial on it)
• package-lock.json (see my tutorial on package-lock)

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 (see this)

Open package.json, which now has this content:

package.json

{
  "name": "nextbnb",
  "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:

package.json

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

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:

pages/index.js

const Index = () => (
  <div>
    <h1>Nextbnb</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.

Open http://localhost:3000 in your browser:

It’s working!

If you view the source of the page, you’ll see the <div><h1>Nextbnb</h1></div> snippet in the HTML, along with a bunch of JavaScript files:

which means SSR (server-side rendering) is already working.

That’s great! We can now start diving directly into the application we are going to build, starting from creating a list of houses.

---

Go to the next lesson