Vercel - Nitro

Preset: vercel

Deploy using git

Push your code to your git repository (GitHub, GitLab, Bitbucket).
Import your project into Vercel.
Vercel will detect that you are using Nitro and will enable the correct settings for your deployment.
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

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

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

Vercel edge functions

Preset: vercel_edge

Vercel KV storage

You can easily use Vercel KV Storage with Nitro Storage.

This feature is currently in beta. Please check driver docs.

Install

@vercel/kv dependency:

package.json

{
  "devDependencies": {
    "@vercel/kv": "latest"
  }
}

Update your configuration:

export default defineNitroConfig({
  storage: {
    data: { driver: 'vercelKV' }
  }
})

You need to either set KV_REST_API_URL and KV_REST_API_TOKEN environment variables or pass url and token to driver options. Check driver docs for more information about usage.

You can now access data store in any event handler:

export default defineEventHandler(async (event) => {
  const dataStorage = useStorage("data");
  await dataStorage.setItem("hello", "world");
  return {
    hello: await dataStorage.getItem("hello"),
  };
});

API routes

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

routes/api/ for standalone usage
server/api/ with Nuxt.

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:

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.

Edit this page on GitHub

StormKit

Deploy Nitro apps to StormKit.

Zeabur

Deploy Nitro apps to Zeabur.