From Workers to the Edge: The Definitive Migration Guide from Cloudflare to Vercel

Cloudflare has long been the titan of the edge, providing unparalleled DDoS protection and a robust global network. However, as the industry shifts toward a "Developer Experience (DX) First" philosophy, many elite teams are finding that Vercel offers a more cohesive, integrated, and frictionless environment—especially for those deeply invested in the React and Next.js ecosystems.

Migrating isn't just about moving files; it’s about shifting your architectural mindset from "Infrastructure as a Service" to "Platform as a Service." In this guide, I’ll walk you through the technical nuances of moving from Cloudflare (Pages/Workers) to Vercel without a second of downtime.

Why Make the Switch?

Before we touch the code, let’s address the why. Cloudflare Workers are powerful, but they often feel like building with raw materials. Vercel, on the other hand, provides the finished house.

1. Framework Intelligence: Vercel understands your code. It optimizes images, handles Incremental Static Regeneration (ISR), and manages headers automatically.
2. Preview Deployments: While Cloudflare has improved here, Vercel’s deployment pipeline—with instant feedback and collaborative comments—is still the gold standard.
3. The Middleware Advantage: Moving from standalone Workers to Next.js Middleware allows you to keep your logic close to your UI, reducing cognitive load.

---

Phase 1: The DNS Handshake

The most critical part of any migration is the DNS. You have two choices: move your nameservers to Vercel or keep Cloudflare as your DNS provider and point records to Vercel.

Pro Tip: The "Partial Setup"

If you rely on Cloudflare’s WAF (Web Application Firewall) or specialized Page Rules, do not move your nameservers. Instead, use a CNAME record.

1. In the Vercel Dashboard, add your domain.
2. Vercel will provide a CNAME record (e.g., cname.vercel-dns.com).
3. In Cloudflare, create a CNAME record for your subdomain (or root via CNAME flattening) pointing to Vercel.
4. Important: Set the Cloudflare Proxy status to "DNS Only" (Grey Cloud) during the initial validation to ensure Vercel can issue the SSL certificate. You can re-enable the proxy (Orange Cloud) once the certificate is active, but ensure "Full (Strict)" SSL is enabled in Cloudflare.

---

Phase 2: From Workers to Edge Functions

If you are running logic in Cloudflare Workers, you’ll need to port that logic to Vercel Edge Functions. While both use the Web Standard APIs (Fetch, Request, Response), the execution context differs slightly.

Cloudflare Worker (Before):

typescriptCopy
1// index.js
2export default {
3  async fetch(request, env) {
4    const url = new URL(request.url);
5    if (url.pathname === '/api/hello') {
6      return new Response(JSON.stringify({ hello: 'world' }), {
7        headers: { 'content-type': 'application/json' },
8      });
9    }
10    return fetch(request);
11  },
12};

Vercel Edge Function (After):

If you’re using Next.js, this becomes an API route or Middleware.

typescriptCopy
1// pages/api/hello.ts
2export const config = {
3  runtime: 'edge',
4};
5
6export default async function handler(req: Request) {
7  return new Response(JSON.stringify({ hello: 'world' }), {
8    status: 200,
9    headers: { 'content-type': 'application/json' },
10  });
11}

The Nuance: Vercel’s Edge Runtime is built on the same V8 engine as Cloudflare Workers, so most of your logic—like JWT verification or header manipulation—will copy-paste with zero changes.

---

Phase 3: Handling Redirection and Headers

In Cloudflare, you likely used wrangler.toml or Page Rules for redirects. In Vercel, this is handled via vercel.json or your framework's config file (next.config.js).

The Vercel Configuration Approach

Create a vercel.json in your root directory to handle global routing logic:

jsonCopy
1{
2  "redirects": [
3    {
4      "source": "/old-blog/:path*",
5      "destination": "/blog/:path*",
6      "permanent": true
7    }
8  ],
9  "headers": [
10    {
11      "source": "/(.*)",
12      "headers": [
13        {
14          "key": "X-Content-Type-Options",
15          "value": "nosniff"
16        }
17      ]
18    }
19  ]
20}

---

Phase 4: Environment Variables and Secrets

Cloudflare Workers use wrangler secret put or the dashboard. Vercel provides a more robust environment management system that differentiates between Development, Preview, and Production environments.

Elite Workflow:

1. Use the Vercel CLI to pull variables locally: vercel env pull .env.local.
2. Ensure any "Secrets" from Cloudflare are manually ported over.
3. Note: If you were using Cloudflare KV or D1, you will need to keep those on Cloudflare and access them via a Worker as an API or migrate to an alternative like Vercel KV (Upstash) or Vercel Postgres (Neon).

---

Phase 5: CI/CD and Build Optimization

One of the biggest wins when moving to Vercel is the build pipeline. Cloudflare Pages builds can sometimes feel slow or opaque. Vercel provides deep introspection into your build logs.

Optimizing the Build

If you are migrating a large monorepo (using Nx or Turborepo), Vercel’s "Remote Caching" is a game-changer. It ensures that you never build the same code twice.

In your vercel.json, you can define the build command specifically if the auto-detection fails:

jsonCopy
1{
2  "buildCommand": "npm run build",
3  "outputDirectory": "dist",
4  "framework": "nextjs"
5}

---

The "Gotchas": What to Watch Out For

1. Cold Starts: Both platforms use isolates, so cold starts are negligible. However, Vercel’s Serverless Functions (Node.js) do have cold starts. If you need maximum performance, always opt for the edge runtime.
2. Request Limits: Cloudflare is very generous with request counts on their paid tier. Vercel’s Pro plan has specific limits on execution time and bandwidth. Monitor your usage in the "Analytics" tab during the first week.
3. Image Optimization: If you were using Cloudflare Images, you’ll want to switch to Vercel Image Optimization. It’s as simple as using the <Image /> component in Next.js. It will automatically resize and serve WebP/AVIF formats based on the browser.

Final Thoughts

The migration from Cloudflare to Vercel is less about raw compute power and more about velocity. By moving to Vercel, you’re trading manual infrastructure management for a streamlined, intelligent pipeline that lets you focus on what actually matters: your product.

Once your DNS propagates and your Edge Functions are firing, you’ll notice the immediate difference in your deployment workflow. Welcome to the elite side of the edge.

Happy hacking.