Getting Started with Next.js and Now

Creating a Next.js project and deploying it with ZEIT Now

This guide will help you get started using Next.js with Now by covering a variety of topics from Installing Now to deploying your Next.js application with a single command.

Next.js is a framework, created by ZEIT, for creating production-ready and lightning fast React applications with a lot of handy features built-in.

Installing Now

Note: If you already have Now installed, you can skip this step.

To get started with Now, you must first install it. For your convenience, we have provided multiple options for installation, including the Now Desktop app, or Now CLI with Yarn, npm, or Curl.

You can find installation instructions for all the available options on the download page.

GitHub and GitLab Integrations

To enhance your development experience with Now further, with automatic deployments, aliasing, and more, we also provide integrations with both GitHub and GitLab.

For more information, the links above outline the key features and the benefits our Git integrations bring to your workflow.

Step 1: Creating the Project

To get started, create a project directory and cd into it:

mkdir my-nextjs-project && cd my-nextjs-project

Creating an entering into the my-nextjs-project project directory.

With the project directory created, initialize the project like so:

yarn init -y

Initializing your project with a package.json file.

Note: Using the -y flag will initialize the created package.json file with these default settings.

Next, add the project dependencies:

yarn add next react react-dom

Adding next, react and react-dom as dependencies to your project.

With your project setup, create a /pages folder:

mkdir pages

Creating a /pages folder in your project.

Inside your /pages folder, create an index.js file with the following content:

import Head from 'next/head'

export default function HomePage() {
  return (
    <main>
      <Head>
        <title>Next.js on Now</title>
      </Head>
      <h1>Next.js on Now</h1>
      <h2>
        Developed & Deployed with{' '}
        <a
          href="https://zeit.co/docs"
          target="_blank"
          rel="noreferrer noopener"
        >
          ZEIT Now
        </a>
        !
      </h2>
      <style jsx>{`
        main {
          font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue',
            'Helvetica', 'Arial', sans-serif;
          padding: 20px 20px 60px;
          max-width: 680px;
          margin: 0 auto;
          font-size: 16px;
          line-height: 1.65;
          text-align: center;
        }
        h1 {
          margin-top: 70px;
          font-size: 45px;
        }
        a {
          cursor: pointer;
          color: #0076ff;
          text-decoration: none;
          transition: all 0.2s ease;
          border-bottom: 1px solid white;
        }
        a:hover {
          border-bottom: 1px solid #0076ff;
        }
      `}</style>
    </main>
  )
}

An index.js file for your Next.js project.

Lastly, create a next.config.js file at the root of your project, this file tells Next.js to target a serverless build environment:

module.exports = {
  target: 'serverless'
}

A next.config.js file for your Next.js project.

Adding now.json and .nowignore

To provide configuration for your project, you should use a now.json file.

Create a now.json file at the root of your project with the following code:

{
  "version": 2,
  "alias": "my-aliased-nextjs-project",
  "name": "my-nextjs-project"
}

A now.json file to configure your project.

The now.json file achieves a few things:

The .nowignore file works similarly to a .gitignore file and is used to tell the Now CLI, Now for GitHub, and Now for GitLab integrations to not upload certain files or directories.

Create a .nowignore file in the root of your project directory with the following code:

yarn.lock

A .nowignore file for your Next.js project.

Now that you've provided some configuration for your Next.js project, let's see in the next step how to build your files for the output.

Adding a Builder

Builders provide the step that turns your source code into production-ready outputs.

These outputs can be either static files and/or Lambdas. Both output types get served by our CDN at the Edge, making your deployments blazing fast to access around the globe.

For this project, you will require the use of a single Builder, @now/next. To get started with the Next.js Builder, add the following code to your now.json file:

{
  ...
  "builds": [
    { "src": "next.config.js", "use": "@now/next" }
  ]
}

Adding a Builder to your projects' now.json file.

Step 2: Local Development

For a seamless local development experience, you should use now dev, a reproduction of the Now deployment environment but on your local machine.

As hinted at above, you can start developing locally with just a single command:

now dev

Starting a local development server with the now dev command.

After shortly installing and setting up the required Builders, now dev will start from localhost on port 3000, if available, else the next available port.

now dev watches your files for any changes, automatically updating when any are made, leaving you free to focus on developing your application.

Step 3: Cloud Deployment

When you're happy with your project and ready to share it with the world, it is time to deploy with Now.

Just like now dev, cloud deployment is handled with just a single command:

now

Deploying your project with the now command.

After your project has been built and deployed, you will receive a deployment URL with the following format:

project-name.account-name.now.sh

An example deployment URL for your project.

Your project is live at this URL immediately, allowing it to be shared with no delay.

Further Examples

You can see more examples of Next.js on Now at the Now Examples GitHub repository.

Below is a list of all Next.js examples available:

These examples show how Next.js can be used with Now in a variety of different situations.

You can get your project started in seconds by building on top of these examples with the help of now init:

now init

Using the now init command to create a project from an example.

After entering the now init command, you will be presented with a list of projects to choose from the Now Examples GitHub repository.

All of these examples are immediately ready for either local development or cloud deployment to help you get your project up and running as quick as possible.

Resources

For more information on working with Next.js, please refer to the Next.js documentation.

To configure Now further, please see these additional topics and guides:



Written By
Written by timothytimothy
Written by msweeneydevmsweeneydev
on February 10th 2019