From Workers to the Frontend Cloud: A Definitive Migration Guide from Cloudflare to Vercel

Cloudflare is an absolute titan of the internet. Their global network is unparalleled, and for low-level infrastructure or heavy-duty DDoS protection, they are hard to beat. But let’s be honest: if you are a product-focused developer or part of a fast-moving engineering team, the Cloudflare developer experience (DX) can often feel like it’s fighting against you. Between the fragmented landscape of Workers vs. Pages and the sometimes cryptic wrangler.toml configurations, the friction adds up.

Vercel, on the other hand, has perfected the "Frontend Cloud." It’s not just about hosting; it’s about a cohesive ecosystem where deployments, preview environments, and edge compute work in perfect harmony.

If you’re ready to trade configuration fatigue for velocity, this is how you migrate from Cloudflare to Vercel without dropping a single packet.

---

1. The Pre-Migration Audit: Mapping Your Stack

Before we touch a single DNS record, we need to map your current Cloudflare footprint. Cloudflare usually touches three main areas: DNS/CDN, Compute (Workers), and Storage (KV, R2, D1).

The Compute Translation Layer

• Cloudflare Workers → Vercel Edge Functions or Middleware.
• Cloudflare Pages → Vercel Projects.
• Cloudflare Cron Triggers → Vercel Cron Jobs.

The Storage Translation Layer

• Cloudflare KV → Vercel KV (Powered by Upstash).
• Cloudflare R2 → Vercel Blob (or Tigris/S3).
• Cloudflare D1 → Vercel Postgres (Powered by Neon).

Pro Tip: Don't try to migrate everything at once. Start by moving the hosting and compute. You can actually keep your data in Cloudflare (like R2) and access it via Vercel until you're ready for a full data migration.

---

2. Preparing the Codebase

Cloudflare Workers use a specific syntax, often relying on the fetch event listener or ES module exports that expect specific Cloudflare bindings. Vercel Edge Functions are built on the same Web Standard APIs (Request/Response), but the entry points differ.

From Worker to Middleware

If you are using a Cloudflare Worker for URL rewriting or headers, you’ll move that logic into a middleware.ts file at the root of your Vercel project.

Cloudflare Worker (Before):

javascriptCopy
1export default {
2  async fetch(request, env) {
3    const url = new URL(request.url);
4    if (url.pathname.startsWith('/api/legacy')) {
5      return Response.redirect('https://new-api.com', 301);
6    }
7    return fetch(request);
8  },
9};

Vercel Middleware (After):

typescriptCopy
1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  if (request.nextUrl.pathname.startsWith('/api/legacy')) {
6    return NextResponse.redirect(new URL('https://new-api.com', request.url));
7  }
8}

Vercel’s approach is more declarative and integrates directly with your framework’s routing system, reducing the "black box" feel of standalone workers.

---

3. Handling Environment Variables and Secrets

In Cloudflare, you likely manage secrets via the Dashboard or wrangler secret put. In Vercel, this process is significantly more streamlined.

1. Importing: Use the Vercel CLI to pull your existing environment variables into a local .env file for testing: vercel env pull.
2. Scopes: Vercel allows you to scope variables specifically to Development, Preview, and Production. This is a lifesaver for preventing "test data in production" disasters.

Insider Knowledge: If you have dozens of secrets, don't copy-paste them manually. Use the Vercel API or the CLI to bulk upload them. A simple bash script looping through your .env can save you an hour of manual labor.

---

4. The DNS Transition: Zero Downtime Strategy

This is the part that keeps developers awake at night. If you misconfigure your DNS, your site goes dark.

Option A: The Full Transfer (Recommended)

Move your domain's Nameservers to Vercel. This gives Vercel full control over SSL issuance and record optimization.

1. Add your domain in the Vercel Dashboard.
2. Vercel will provide two Nameservers (e.g., ns1.vercel-dns.com).
3. In your domain registrar (GoDaddy, Namecheap, etc.), replace the Cloudflare Nameservers with Vercel's.

Option B: The CNAME Approach

If you must keep Cloudflare as your DNS provider (perhaps for corporate compliance), you can point a CNAME record to Vercel.

1. In Cloudflare DNS, create a CNAME record for www pointing to cname.vercel-pub.com.
2. Crucial: Set the proxy status to "DNS Only" (Grey Cloud) during the initial setup to allow Vercel to verify the SSL certificate. Once verified, you can re-enable the Orange Cloud, but ensure "SSL/TLS Recommender" is off and mode is set to "Full (Strict)".

---

5. Migrating Data (KV to Vercel KV)

If your application relies on Cloudflare KV, you’ll need to migrate that data to Vercel KV. Since Vercel KV is Redis-compatible, the transition usually improves your local development workflow as well.

The Dual-Write Strategy: To migrate without downtime:

1. Update Code: Modify your app to read from Cloudflare KV but write to both Cloudflare and Vercel KV.
2. Backfill: Run a script to move all existing keys from Cloudflare to Vercel.
3. Switch: Update the code to read from Vercel KV.
4. Cleanup: Remove the Cloudflare write logic.

typescriptCopy
1// Example of a dual-write migration helper
2async function setKV(key: string, value: string) {
3  await cloudflareKV.put(key, value); // Old
4  await vercelKV.set(key, value);      // New
5}

---

6. Optimization: Leveraging Vercel’s Edge Network

Once you are on Vercel, don't just "run" your app—optimize it. Cloudflare Workers are often used for heavy lifting because of their 0ms cold starts. Vercel Edge Functions offer the same benefit but with a much friendlier API.

Image Optimization

If you were using Cloudflare Images or Polish, switch to next/image or Vercel Image Optimization. It’s automatic, handles WebP/AVIF conversion out of the box, and doesn't require complex URL signing logic.

Edge Config

For things like feature flags or redirect maps that you used to store in Cloudflare KV, look into Vercel Edge Config. It provides near-zero latency (sub-1ms) reads because the data is replicated to the edge before the request even arrives.

---

7. Final Verification

Before you pull the plug on your Cloudflare account, run through this checklist:

• Headers: Check if your app relied on cf-ipcountry or other Cloudflare-specific headers. Vercel provides equivalents like x-vercel-ip-country.
• SSL: Ensure the Vercel certificate is active and not "Pending."
• WAF Rules: If you had custom Firewall rules in Cloudflare, recreate them in Vercel Firewall Settings.
• Deployment Hooks: Update any GitHub/GitLab webhooks. (Vercel’s native integration usually handles this automatically upon connecting the repo).

The Verdict

Migrating from Cloudflare to Vercel is more than just a change in hosting; it’s an upgrade in how you build. You’re moving from a "network-first" mentality to a "product-first" mentality. You’ll find that your team spends less time debugging deployment pipelines and more time shipping features.

The transition might take a few hours of focused work, but the dividends paid in developer velocity are worth every second. Welcome to the Frontend Cloud.