Skew Protection

Version skew occurs when different versions of your application run on client and server, causing application errors and other unexpected behavior. For example, imagine your newest deployment modifies the data structure by adding a required field to a user's profile. Older clients wouldn't expect this new field, leading to errors when they submit it.

Vercel's Skew Protection resolves this problem at the platform and framework layer by using version locking, which ensures client and server use the exact same version. In our example, outdated clients continue to communicate with servers that understand the old data structure, while updated clients use the most recent deployment.

By implementing Skew Protection, you can reduce user-facing errors during new rollouts and boost developer productivity, minimizing concerns about API compatibility across versions.

If you are using one of the supported frameworks, you can enable Skew Protection in your project settings.

1. Select the project in the Vercel dashboard
2. Select the Settings tab in the top menu
3. Select the Advanced tab in the side menu
4. Scroll down to Skew Protection and enable the switch
5. For Enterprise Teams, you can also set a custom duration (see limitations)

In some cases, you may have problematic deployments you want to ensure no longer resolves requests from any other active clients.

Once you deploy a fix, you can Configure Skew Protection with the following:

1. Select the deployment that fixed the problem in the deployment list
2. Select the button (near the Visit button)
3. Click Configure Skew Protection
4. Click Save to apply the changes

This ensure that deployments created before the fixed deployment will no longer resolve requests from outdated clients.

You can observe how many requests are protected from version skew by visiting the Monitoring page in the Vercel dashboard.

For example, on the requests event, filter where skew_protection = 'active'.

Skew Protection is available with zero configuration when using the following frameworks:

• Next.js
• SvelteKit
• Nuxt (coming soon)
• Astro (coming soon)

Other frameworks can implement Skew Protection with the following:

• Check if process.env.VERCEL_SKEW_PROTECTION_ENABLED has value 1 to determine if Skew Protection is enabled for the project
• Append the value of process.env.VERCEL_DEPLOYMENT_ID to each request using one of the following:
  1. dpl query string parameter
  2. x-deployment-id header
  3. __vdpl cookie

For example, option 2 may look like the following:

const headers =
  process.env.VERCEL_SKEW_PROTECTION_ENABLED === '1'
    ? { 'x-deployment-id': process.env.VERCEL_DEPLOYMENT_ID }
    : {};
 
const res = await fetch('/get', { headers });

If you are using Next.js 14.1.4 or newer, there is no additional configuration needed to enable Skew Protection.

If you are using Next.js 13.4.7 to 14.1.3, update the experimental section of your project's next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    useDeploymentId: true,
    // Optionally, use with Server Actions
    useDeploymentIdServerActions: true,
  },
};
 
module.exports = nextConfig;

The useDeploymentId configuration enables Skew Protection for all framework-managed static file requests from your Next.js app such as for JavaScript and CSS files. You can also opt-into Skew Protection for Next.js Server Actions with useDeploymentIdServerActions.

If you are using SvelteKit, you will need to install @sveltejs/adapter-vercel version 5.2.0 or newer in order to enable Skew Protection.

If you are using an older version, you can upgrade by running npm i -D @sveltejs/adapter-vercel@latest.

• Skew Protection is only available for Pro and Enterprise, not for Hobby accounts
• Skew Protection is enabled for 12 hours on Pro accounts and a custom duration on Enterprise accounts