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:

• how to install Node.js
• how to update Node.js
• An introduction to the npm package manager
• Unix Shells Tutorial
• How to use the macOS terminal
• The Bash Shell

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.

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 (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.

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.

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

Lessons in this unit:

0:	Introduction
1:	Getting started with Next.js (Pages Router), a tutorial
2:	▶︎ How to install Next.js
3:	How I set up a Next.js project structure
4:	Linking two pages in Next.js using Link
5:	How to use the Next.js Router
6:	Dynamic content in Next.js with the router
7:	Prefetching content in Next.js
8:	How to programmatically change a route in Next.js
9:	View source to confirm SSR is working in Next.js
10:	Feed data to a Next.js component using getInitialProps
11:	Styling Next.js components using CSS
12:	Next.js: populate the head tag with custom tags
13:	How to use Next.js API Routes
14:	How to get cookies server-side in a Next.js app
15:	Deploying a Next.js application on Now
16:	Deploying a Next.js app in production