Upgrade Your Existing ZEIT Now Projects With Zero Configuration
Upgrade your existing ZEIT Now projects to use no 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" } ] }
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" } } ] }
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" } }
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.
.nowignore
so that your project is rebuilt with each deployment.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" } ] }
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" } ] }
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}!`) }