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.

Add the following build script to your package.json file:

{
...
  "scripts": {
    "build": "next build"
  }
}

An examplepackage.json file for your Next.js 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.

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 installing the project dependencies, 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.

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