Blue-Green Deployments on Vercel

The Blue-Green Deployments on Vercel template from Vercel Labs demonstrates how to serve two versions of a Next.js app at once and switch traffic between them using Vercel's Edge Config, Middleware, and Skew Protection.

What is Blue-Green Deployments on Vercel?

This template is a reference implementation from Vercel Labs for running blue-green deployments on Vercel without a load balancer. It takes two Vercel deployment URLs and a traffic split percentage as input, and outputs a routing decision in a Next.js middleware file that sends each user to either the blue or green deployment. It runs on Vercel's platform and uses Next.js middleware, Edge Config storage, and the Skew Protection feature to keep users on the same deployment for the duration of a session.

Key Features

• One-click Vercel deployment — The template's repository includes a Deploy with Vercel button that clones the GitHub repo, so you can start with a working project instead of configuring from scratch.
• Skew Protection integration — Assignments to blue or green are sticky across Vercel's global CDN, edge functions, and serverless functions, preventing users from jumping between versions mid-session.
• Edge Config routing — A single JSON object stored in Edge Config holds three keys: the blue deployment domain, the green deployment domain, and a trafficGreenPercent value that controls the percentage of traffic sent to green.
• Next.js Middleware — The middleware.ts file in the repo implements the routing logic, reading the Edge Config on each request and directing users based on a random assignment weighted by the traffic percentage.
• CI/CD automation — The repository contains a GitHub Action workflow that creates new deployments and updates the Edge Config with the new deployment URLs, enabling fully automated blue-green rollouts.
• Instant switch and rollback — Updating the Edge Config manually immediately starts serving the new deployment, and reverting the config instantly routes users back to the previous version.
• Documented alternative — The page also links to Vercel's Rolling Releases feature, which provides built-in blue-green deployments with no code changes.

Who is it for?

• DevOps and platform engineers — Use this template to implement blue-green deployments for production Next.js applications without managing load balancers, relying only on Vercel primitives.
• Next.js developers — Learn how to combine Edge Config, Middleware, and Skew Protection by studying the middleware.ts file included in the repo.
• Teams with CI/CD pipelines — Adopt the GitHub Action workflow to automate multi-stage rollout strategies and integrate with their existing observability tooling.

What can you do with Blue-Green Deployments on Vercel?

• Run canary releases: Set trafficGreenPercent to a low number like 10 to send a small portion of users to the new green build while the blue build serves everyone else.
• Roll back instantly: If the green build has issues, update the Edge Config to point all traffic back to blue, restoring the previous version immediately.
• Automate staging-to-production: Use the provided GitHub Action to build new deployments on every push, then update the Edge Config to green once tests pass.

How does Blue-Green Deployments on Vercel work?

The setup involves four steps: deploy the template, activate Skew Protection, enable deployment protection bypass, and create an Edge Config with the blue/green domains and traffic percentage. After that, the middleware reads the config and routes traffic. To execute a deployment, you either edit the Edge Config manually or let the CI/CD pipeline call Vercel's Edge Config API to update the stored domains and percentages.