Airbnb clone, let's start by installing Next.js

Join the 2022 Full-Stack Web Dev Bootcamp!

This post is part of a new series where we build a clone of Airbnb with Next.js. See the first post here.

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!

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 Next.js project using create-next-app:

npx create-next-app .

Open the project folder using your favorite editor. You can use VS Code.

If you have that installed, you can run code . in your terminal to open the current folder in the editor (see this)

The sample project structure should contain a few files already:

VS Code

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:

Next working

It’s working! That’s pretty cool. You can play around with the sample app a little bit, if you want.

If this is the first time you see a Next.js app, I recommend you look at it along with a copy of my free Next.js Handbook.

Once you’re ready we can start diving directly into the application we are going to build, starting from creating a list of houses.

Next part: Build the list of houses

Want to become a better Web Developer? Join the 2022 Web Development Bootcamp!

⭐️⭐️⭐️ Join the 2022 Web Development Bootcamp ⭐️⭐️⭐️