How to Bootstrap a New Next.js Web Application

Introduction

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 React, { 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!