How to install Next.js

Step-by-step instructions to start using Next.js

To install Next.js, you needNode.jsIt has been installed.

Make sure you have the latest version of Node. Running checknode -vIn your terminal and compare it with the latest LTS version listedhttps://nodejs.org/.

After installing Node.js, you will havenpmCommands can be used on your command line.

If you encounter any trouble at this stage, I suggest you write the following tutorial for me:

Now you have updated Node to the latest version, andnpm, Create an empty folder in any location you like (for example, in the main folder), and then enter that folder:

mkdir nextjs
cd nextjs

And create your first Next project

mkdir firstproject
cd firstproject

Use nownpmInitialize it as a command for the Node project:

npm init -y

This-yOption tellnpmUse the project’s default settings to fill in the examplepackage.jsonfile.

npm init result

Now install Next and React:

npm install next react react-dom

Your project folder should now have 2 files:

withnode_modulesfolder.

Use your favorite editor to open the project folder. My favorite editor isVS code. If it is installed, you can runcode .Open the current folder in the editor in the terminal (if this command does not work for you, please refer toThis)

turn onpackage.json, Now has the following 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 replacescriptsThe section with the following content:

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

Add Next.js build command, we will use it soon.

the package.json file

Create one nowpagesFolder and add aindex.jsfile.

In this file, let's create the first React component.

We will use it as the default export:

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

export default Index

Now use the terminal and runnpm run devStart the Next development server.

This will make the application available on port 3000 on the local host.

npm run dev

turn onhttp://localhost:3000View it in the browser.

The first Next app screen

Download mine for freeNext.js manual


More tutorials next: