How to install Next.js
Step by step instructions to get started with Next.js
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.
I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
- C Handbook
- Command Line Handbook
- CSS Handbook
- Express Handbook
- Git Cheat Sheet
- Go Handbook
- HTML Handbook
- JS Handbook
- Laravel Handbook
- Next.js Handbook
- Node.js Handbook
- PHP Handbook
- Python Handbook
- React Handbook
- SQL Handbook
- Svelte Handbook
- Swift Handbook
JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025