Next.js Builder (@now/next)

Status: Stable

The Now Next.js Builder takes a Next.js application, defined by a next.config.js entrypoint and pages directory, and converts those pages into a series of individual lambdas.

It features built-in caching of node_modules and all compiler artifacts for very fast deployments.

@now/next is the ideal way to ship a fast, production-ready Next.js application that scales automatically.

For more information on why you should use Next.js for your project, see the Next.js website.

The first step is to set up a Next.js project. If you have not yet done so; the best place to get started is the Next.js documentation.

To get started, make sure you have installed the Next.js dependencies with the following command:

yarn add next react react-dom

Then, in your project directory, create a pages directory with some example pages, for example; the home index page, pages/index.js:

export default () => <div>Hello world!</div>

Create a simple next.config.js file to use as our entrypoint for the build, and to configure that the build should be a collection of serverless lambdas:

module.exports = {
  target: 'serverless'
}
Note: The serverless method is only supported in Next.js version 8 and above.

Then define a build step in a now.json configuration file:

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

Upon deployment, you will get a URL like this: https://nextjs-8fnzfb1ci.now.sh

For a more in-depth guide on setting up and deploying Next.js with caching headers, see our guide:

If you are looking to set up custom routes for your Next.js app, see the following guide:

The entrypoint of this builder is a next.config.js file with the target configuration option set to serverless.

module.exports = {
  target: "serverless"
}

This configuration, shown above, tells Next.js to build each page in the pages directory as a lambda function.

For more information on this, see the Next.js documentation.

The installation algorithm of dependencies works as follows:

  • If a package-lock.json is present, npm install is used
  • Otherwise, yarn is used.

To install private npm modules, define NPM_TOKEN as a build environment in now.json.

The Node.js version used is the latest in the 8 branch.

This builder separates your pages into individual serverless endpoints, so you cannot use a custom server.

Using a custom server would require that all pages be routed through that custom server and the application would lose out on many of the benefits of serverless Next.js. You can still achieve most of the logic that you have in a custom server by using getInitialProps() and using routes.

To help keep cold boot times low, the maximum output bundle size for a Next.js output lambda is, by default, 5mb. This limit is extendable up to 50mb.

Example maxLambdaSize configuration:
{
  "builds": [
    { "src": "next.config.js", "use": "@now/next", "config": { "maxLambdaSize": "10mb" } }
  ]
}