Upgrade Your Existing ZEIT Now Projects With Zero Configuration

With zero configuration, it's never been easier to deploy an app with ZEIT Now. This guide highlights a set of common scenarios, showing you how to take advantage of these new features.

Next.js

In the first example, we will explore how to deploy a Next.js app with zero configuration.

Using the Next.js example project from the ZEIT Now Examples repository, the following now.json configuration file was previously needed to deploy:

{
  "version": 2,
  "name": "my-nextjs-project",
  "builds": [
    { "src": "package.json", "use": "@now/next" },
    { "src": "backend/**/*.js", "use": "@now/node" }
  ]
}

A previously required now.json configuration file.

Next.js with Zero Configuration

With zero configuration, the now.json file is no longer required. You only have to remove the now.json file from your project.

For Next.js projects that have a JavaScript API, you can use a /pages/api/ folder, this will allow Next.js to handle the building of these files for you.

If your Next.js project is using a different language for the API, put it in the top-level /api directory instead. By doing that, you will take advantage of Now's native support for Serverless Functions written in multiple languages, while /pages/api only supports JavaScript (powered by Next.js).

View this zero configuration deployment on Now: https://next-zero-config.now-examples.now.sh/

Other Frameworks

Using frameworks other than Next.js with zero configuration is just as straightforward. For example, let's take a look at Gatsby.

Before zero configuration, the Gatsby default starter would require a now.json file like following:

{
  "version": 2,
  "name": "my-gatsby-project",
  "builds": [
    {
      "src": "package.json",
      "use": "@now/static-build",
      "config": { "distDir": "public" }
    }
  ]
}

A previously required now.json configuration file.

Frameworks with Zero Configuration

The above configuration is no longer required. Instead, for frontend frameworks like Gatsby or Next.js, Now will locate the build script inside a package.json file at your project's root and use it to build and serve the output from the public directory.

A set of frontend frameworks are optimized for Now with zero configuration. If the framework you are using is not, you must ensure that the build output directory is set to public.

If your framework does not support changing the output build directory, you can make an addition to your build script, moving the build output to the public folder manually like the example below:

{
  "scripts": {
    "build": "jekyll build && mv _site public"
  }
}

A package.json file used to build Jekyll and move the output directory to public.

In this example, after the build step is executed, the _site folder, generated by Jekyll, is renamed to public.

To check the output directory for your framework, run npm run build inside your project from the terminal, then check the root of your project directory for a newly created folder. Alternatively, your frameworks documentation should list it.

APIs

Zero configuration makes it straightforward to deploy an API alongside a frontend project. Let's look at a Go example to illustrate the differences and see how zero configuration simplifies the process.

The following now.json was previously needed to deploy a Go Serverless Function in the api directory.

{
  "name": "go-date",
  "version": 2,
  "builds": [
    {
      "src": "/api/date.go",
      "use": "@now/go"
    }
  ],
  "routes": [
    {
      "src": "/date",
      "dest": "api/date.go"
    }
  ]
}

A previously required now.json configuration file.

With this setup, requiring a Builder and Route, all requests made to /date will receive a response of the current date and time.

However, when writing multiple endpoints you will either require RegEx knowledge or be prepared to write a Route and Builder for each and every endpoint.

With Zero Configuration

Zero configuration for API's has one rule, put everything in a top level /api directory. From there, Now will handle all of the building and routing for you.

In the example above, all that would be required is to move /api/date.go into the project's root directory and then simply deleting the now.json file.

After deleting the now.json file, the date function would then be available at /api/date, providing an API with filesystem based routing, all without requiring any configuration.

Migrating Route Parameters

In some cases, your app may use route parameters in the routes property of a now.json file, this too can be done without configuration.

When using route parameters, a now.json file would have contained something similar to the following route:

{
  ...
  "routes": [
    {
      "src": "/api/users/(?<user>)",
      "dest": "/api/users?user=$user"
    }
  ]
}

Capturing a route parameter in a path and rewriting it to the intended destination.

Instead of defining configuration, you can use the filesystem to create the route for you, using Path Segments.

To use Path Segments using the example configuration's structure above, you only need to create a file within the /api/users directories called [user].js (including the square brackets, with any supported language). This will act as a Serverless Function that receives a query, but can be accessed through a path such as my-zeit-domain.com/api/users/my-username.

To use the information from a Path Segment, you can use your languages method for using query strings. For example, a Node.js Serverless Function would look like the following:

module.exports = (req, res) => {
  res.send(`Hello ${req.query.user}!`)
}

An example Node.js Serverless Function that uses Path Segments through helper methods with ZEIT Now.