Create a Next.js Application and Deploy with Now

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

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

In this guide, we will show you how to set up a Server-Side Rendered Next.js application and how to deploy it with ZEIT Now.

Step 1: Set Up Your Next.js Project

The first step to setting up a Next.js project is to create a project directory and then install the required dependencies from your terminal:

yarn add next react react-dom

Installing Next.js, React, and React DOM with Yarn. Alternatively, use npm.

The next step in this set up is to add a scripts property to the package.json file that was generated in the installation above. The property will include a script to run a local server for development of your project:

{
  ...
  "scripts": {
    "dev": "next"
  }
}

A scripts property within a package.json, containing a script to start a Next.js development server.

Now that the initial set up of your Next.js project is done, you are ready to create your first page.

Create a pages directory and then within that directory, create an index.js for the homepage with the following contents:

function Home() {
  return <div>Welcome to Next.js!</div>
}

export default Home

A simple Next.js index page located in the pages directory.

You can then run your new Next.js project with the following command

yarn dev

Running a local development server with the script set up earlier.

You can now start developing your Next.js application while testing it locally.

Step 2: Deploy Your Next.js Project with Now

With your Next.js project set up, you are ready to deploy your app with Now.

If you have not yet installed Now, you can do so by installing the Now Desktop app which installs Now CLI automatically, or by installing Now CLI directly.

The first step of deploying Next.js with Now is to create a next.config.js file to tell Next that the files it will build are serverless. Each page will be built as an individual serverless lambda.

module.exports = {
  target: 'serverless'
}

Setting the Next.js build target to "serverless" to enable serverless builds.

Serverless Next.js is more performant and provides more stability on serverless platforms, such as Now.

Next, you will need to tell Now what the entrypoint is for the application and what Builder it should use to build and deploy the application so it will act as you would expect.

You will need to create a now.json configuration file to instruct Now on how to handle your application in the build phase and when being served to visitors.

{
  "version": 2,
  "name": "my-nextjs-app",
  "builds": [{ "src": "next.config.js", "use": "@now/next" }]
}

A now.json configuration file that specifies the Next.js Builder.

The above now.json file achieves a few things:

  • Defines a version property to ensure you are using the latest Now 2.0 platform version.
  • Defines a project name that your deployments will be sorted under and known by under Now.
  • Defines a builds property as an array with one build step using @now/next to instruct Now to build the project and deploy the output. Using the package.json file as an entrypoint, more on that below.

To ensure a fresh build of your Next.js project gets built by Now, especially if you only deploy the source code, you can add a now-build script to your package.json file:

{
  ...
  "scripts": {
    ...
    "now-build": "next build"
  }
}
Note: Don't forget to exclude the .next and node_modules directories from being uploaded to Now to prevent unintended side effects and to enable faster deployment. To do so, add a .nowignore file to the root of the project directory and add both node_modules and .next to it on separate lines.

Immutable Caching

You can cache your built client-side assets from Next.js with the following addition to your now.json configuration file through a routes property:

{
  ...
  "routes": [
    { "src": "/_next/static/(?:[^/]+/pages|chunks|runtime)/.+", "headers": { "cache-control": "immutable" } }
  ]
}

This configuration will cache assets, generated and given a hash by Next.js in the build phase, immutably. Each subsequent request from a user in the same area as a request that has already happened will be served faster thanks to caching.

These assets are not at risk of affecting new builds since they are hashed by Next.js and any new builds will have a new hash identifier, also being cached on request.

Deploying with Now

You are now ready to deploy the app with Now:

now

Deploying your Next.js app with Now CLI from a terminal.

Once the app is deployed, you will receive a deployment URL similar to the following (styled for effect, with an additional page): https://nextjs-8fnzfb1ci.now.sh

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:


How Was This Guide?

Written By
Written by timothytimothy
on February 11th 2019