How To Bootstrap A New Next.js Web Application
Next.js is a popular framework used for building React applications that offers server-side rendering, automatic code-splitting, static exporting options, and easy production builds. It also relieves a lot of the general headaches involved with creating production-ready React applications.
In this article, we'll show you how to bootstrap a new Next.js web application and get your first page created.
Before you begin this guide you'll need to have Node.js and NPM installed on your local development machine. We created an installation guide if you need help getting Node.js and NPM installed on your machine.
Let's get started!
Bootstrap A New Next.js Application
To bootstrap a new Next.js application, we need to create a new project directory and install the required dependencies using NPM.
Open a new terminal window (Ctrl
+Alt
+T
on Linux or Command
+Space
on Mac) and execute the command below to create a new project folder that will house your Next.js application (replace “your-project”
with the name of your project):
mkdir your-project
And cd
into your new directory:
cd your-project
Next, run this command to initiate a new Node.js application and create a package.json
file in the root of your project:
npm init -y
The npm init -y
command creates a package.json
file in the root location of your project directory. The -y
flag initializes the file with default values.
The package.json
file will allow you to easily install and use NPM package dependencies in your project. It will also make things like sharing your project with other developers easier if you wish to do so in the future.
Check out the NPM documentation if you want to learn more about the contents of the package.json
file.
Now that we have a package.json
file created, we can install the required NPM package dependencies for your Next.js website.
To get started, we'll need the Next, React, and React-Dom NPM packages.
You can install all of them at once with this command:
npm install --save next react react-dom
When those finish installing, you'll notice that a new node_modules
directory was created in your project. This directory stores all of the installed dependencies for your project. If you look inside, you'll notice that the three NPM packages you installed and all of their sub-dependencies are in there.
Since we used the --save
flag on your NPM install command, the three dependencies will be listed in the "dependencies"
section of your package.json
file. In the future when you share your code with others, all of the packages in that list will be installed in the initial setup of the application or when the npm install
command is run.
Now that we have your dependencies installed, we need a way to start your application.
Open the package.json
file and replace the "scripts"
section with this code:
"scripts": {
"dev": "next"
},
The "dev"
script is used to run the application when you're in development mode. This means your code will run with special error handling, hot-reloading, and other features that make the development process more pleasant.
Later on, we'll add more scripts to this section to handle the production versions of your application.
In your terminal, start the application in development mode with this command:
npm run dev
You'll see an error when you execute that command:
Couldn't find a `pages` directory. Please create one under the project root...
Next.js looked for a /pages
directory that holds all the different paths for your website and threw an error when it didn't find one.
To fix the error and get your website running, we need to create a new directory called /pages
and add a page to it that Next.js can render.
First, create a /pages
directory in the root of your project:
mkdir pages
And cd
into it with this command:
cd pages
Then, add a new file called index.js
with this command:
touch index.js
The /pages
directory will hold all of the pages for your website and the index.js
file will serve as your homepage at the "/"
URL path.
The name of each file in the /pages
directory will match the URL path in the browser when your website is visited. For example, a file with the path /pages/articles.js
will have a URL that displays as "/articles"
in the browser. All of this is handled automatically by Next.js.
The /pages/index.js
file is the only exception since it serves as the homepage on the "/"
path.
We need to add some code to your /pages/index.js
file to give Next.js something to render. Open /pages/index.js
in your favorite text editor and add this code to the file:
import { Component } from "react"
export default class extends Component {
render () {
return (
<div>Your Next.js App</div>
)
}
}
The code above creates a React class component that will render Your Next.js App
HTML in the browser and exports it with export default
.
Save the changes to the file and restart your application with:
npm run dev
Open your favorite browser and visit your website: http://localhost:3000.
You should see the text Your Next.js App
displayed on the page.
Congratulations, you have now created a working Next.js web application!
Check out our guide on deploying a Next.js application to a DigitalOcean server.
Thanks for reading and happy coding!