Vercel

Deploy Nitro apps to Vercel.

Preset: vercel

Read more in Vercel Framework Support.
Integration with this provider is possible with zero configuration.

Getting started

Deploying to Vercel comes with the following features:

And much more. Learn more in the Vercel documentation.

Deploy with Git

Vercel supports Nitro with zero-configuration. Deploy Nitro to Vercel now.

API routes

Nitro /api directory isn't compatible with Vercel. Instead, you should use:

  • routes/api/ for standalone usage

Custom build output configuration

You can provide additional build output configuration using vercel.config key inside nitro.config. It will be merged with built-in auto-generated config.

On-Demand incremental static regeneration (ISR)

On-demand revalidation allows you to purge the cache for an ISR route whenever you want, foregoing the time interval required with background revalidation.

To revalidate a page on demand:

Create an Environment Variable which will store a revalidation secret
  • You can use the command openssl rand -base64 32 or Generate a Secret to generate a random value.

Update your configuration:
nitro.config.ts
import { defineNitroConfig } from "nitro/config";

export default defineNitroConfig({
  vercel: {
    config: {
      bypassToken: process.env.VERCEL_BYPASS_TOKEN
    }
  }
})

To trigger "On-Demand Incremental Static Regeneration (ISR)" and revalidate a path to a Prerender Function, make a GET or HEAD request to that path with a header of x-prerender-revalidate: bypassToken. When that Prerender Function endpoint is accessed with this header set, the cache will be revalidated. The next request to that function should return a fresh response.

Fine-grained ISR config via route rules

By default, query paramas are ignored by cache.

You can pass an options object to isr route rule to configure caching behavior.

  • expiration: Expiration time (in seconds) before the cached asset will be re-generated by invoking the Serverless Function. Setting the value to false (or isr: true route rule) means it will never expire.
  • group: Group number of the asset. Prerender assets with the same group number will all be re-validated at the same time.
  • allowQuery: List of query string parameter names that will be cached independently.
    • If an empty array, query values are not considered for caching.
    • If undefined each unique query value is cached independently.
    • For wildcard /** route rules, url is always added
  • passQuery: When true, the query string will be present on the request argument passed to the invoked function. The allowQuery filter still applies.
export default defineNitroConfig({
  routeRules: {
    "/products/**": {
      isr: {
        allowQuery: ["q"],
        passQuery: true,
      },
    },
  },
});