Vercel

Preset: vercel

Deploy using git

1. Push your code to your git repository (GitHub, GitLab, Bitbucket).
2. Import your project into Vercel.
3. Vercel will detect that you are using Nitro and will enable the correct settings for your deployment.
4. Your application is deployed!

After your project has been imported and deployed, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly “main”) will result in a Production Deployment.

Learn more about Vercel’s Git Integration.

Monorepo

Monorepos are supported by Vercel. However a custom "Root Directory" must be specified in "Project Settings > General" tab. Make sure that "Include source files outside of the Root Directory" is checked.

Examples of values for "Root Directory": apps/web or packages/app.

API routes

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

• server/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:

1. 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.
2. Update your configuration:
   nitro.config.tsnuxt.config.ts

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

3. 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,
      },
    },
  },
});

Vercel edge functions

Preset: vercel_edge (deprecated)

We recommend migrating to the default Node.js runtime and enabling Fluid compute.