In this step-by-step guide, you will learn how to install Next.js and get started with your first Next.js project.
To install Next.js, you will need to have Node.js installed on your system. If you don’t have Node.js installed, you can download and install it from here.
Make sure you have the latest version of Node.js installed. To check your Node.js version, open your terminal and run the command node -v
. Compare the output with the latest LTS version available at Node.js website.
If you encounter any issues during the installation process, I recommend checking out the following tutorials I have written:
- 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
Once you have successfully installed Node.js and ensured you have the latest version, follow the steps below to install Next.js:
-
Create an empty folder for your Next.js project. You can choose any location, for example, your home folder. Open your terminal and navigate to the folder you created.
mkdir nextjs cd nextjs
-
Create a new folder for your first Next.js project inside the
nextjs
folder.mkdir firstproject cd firstproject
-
Initialize your project by running the following command:
npm init -y
This command will create a sample
package.json
file with default settings. -
Install Next.js, React, and React DOM by running the following command:
npm install next react react-dom
This will install the required dependencies for your Next.js project. After the installation is complete, your project folder should contain the following files and folders:
-
Open your project folder in your preferred code editor. You can use Visual Studio Code (VS Code), which I recommend. If you have VS Code installed, open your terminal and run the following command to open the project folder in VS Code:
code .
If this command doesn’t work for you, refer to the official VS Code documentation for alternative methods.
-
Open the
package.json
file in your editor and replace thescripts
section with the following code:"scripts": { "dev": "next", "build": "next build", "start": "next start" }
This will add the Next.js build commands that you will use soon.
-
Create a
pages
folder in your project folder, and inside it, create anindex.js
file.In the
index.js
file, create your first React component. Export the component as the default export.const Index = () => ( <div> <h1>Home page</h1> </div> ) export default Index
-
You are now ready to start the Next.js development server. Open your terminal and run the following command:
npm run dev
This will start the development server and make your app available on
http://localhost:3000
. Open this URL in your browser to see your first Next.js app.
Tags: Next.js, Node.js, React, installation, development server