Migra Vercel a Cloudflare OpenNext: Reduce Costos 90%

La bomba de facturación de Vercel que frena el crecimiento de las startups

Next.js es actualmente el estándar abrumador para frameworks full-stack y frontend web. Y la mayoría de los equipos de desarrollo comienzan sus proyectos en Vercel, la plataforma creada por los desarrolladores de Next.js.

La experiencia de desarrollador (DX) de Vercel es excelente. Con un solo push de Git, se completa el despliegue sin interrupciones, se generan URL de previsualización y la optimización de imágenes junto con ISR (Incremental Static Regeneration) funcionan sin necesidad de configuración adicional.

Sin embargo, en el momento en que el proyecto crece, los usuarios activos mensuales (MAU) se disparan o el tráfico explota, Vercel se transforma en “la bomba de costos en la nube más letal”.

[Tarifa base del Plan Vercel Pro: $20/mes]
   + Fast Data Transfer (Egress): $0.15 por GB ($150 al transferir 1TB)
   + Serverless Execution (GB-hours): $0.18/GB-hr al superar el límite
   + Image Optimization: $5 por cada 1,000 imágenes tras superar 5,000
   + Build Minutes: $20 por cada 1,000 minutos tras superar el límite base
---------------------------------------------------
Factura mensual real: $1,250 ~ $3,500+ /mes

En particular, los costos de Egress (transferencia de datos salientes) y las tarifas de optimización de imágenes de Vercel pueden generar inesperadamente facturas de miles de dólares en caso de marketing viral o picos repentinos de tráfico.

Para resolver este problema, la respuesta definitiva presentada por el ecosistema de código abierto en 2025/2026 es OpenNext. Al utilizar OpenNext, puede desplegar aplicaciones Next.js en la infraestructura serverless en el Edge de Cloudflare Workers sin el bloqueo de proveedor (vendor lock-in) de Vercel, logrando reducir los costos mensuales de nube en más de un 90% con el mismo volumen de tráfico.

En este artículo, abordamos en detalle desde la comparación de costos reales por concepto entre Vercel y Cloudflare, la arquitectura de OpenNext (@opennextjs/cloudflare) y sus pasos de migración, la compatibilidad con las API de Node.js, hasta la resolución de problemas (troubleshooting) en escenarios reales.

Comparación detallada de costos: Vercel vs Cloudflare Workers

Comparemos las facturas mensuales de ambas plataformas basándonos en una misma escala de servicio (50 millones de páginas vistas al mes, 2TB de tráfico y 50,000 imágenes optimizadas).

Cloudflare mantiene la política rompedora de Egress (transferencia de red) a $0, y sus costos de ejecución serverless representan apenas una décima parte en comparación con Vercel. En el momento en que migre con OpenNext, podrá escalar su servicio sin preocuparse por las tarifas de infraestructura.

Cómo funciona OpenNext: Portar Next.js al entorno de ejecución en el Edge

Next.js está fuertemente acoplado internamente al entorno de ejecución de Node.js y al proxy propietario de Vercel. OpenNext es una capa adaptadora que analiza los artefactos de compilación de Next.js (.next) y los transpila a código JavaScript estándar e independiente de la plataforma, compatible con serverless en el Edge (workerd).

[Proyecto Next.js App Router]
       |
       v  `npx opennextjs-cloudflare`
+----------------------------------------------------------------+
| Motor de empaquetado OpenNext                                   |
|                                                                |
|  ├── Server Bundle  --> Cloudflare Workers (workerd V8 Isolate)|
|  ├── Static Assets  --> Cloudflare Workers Static Assets / R2  |
|  └── Image Optimizer--> Cloudflare Image Resizing / Worker     |
+----------------------------------------------------------------+
       |
       v  `npx wrangler deploy`
[Despliegue completado en la red Edge global de 300+ ubicaciones de Cloudflare]

Funciones de Next.js compatibles con OpenNext

• Soporte completo para App Router y Pages Router
• Renderizado de Server Components (RSC) y Streaming
• Server Actions y Route Handlers (API POST/GET)
• ISR (Incremental Static Regeneration) y Revalidación (revalidatePath, revalidateTag)
• Optimización automática con el Componente Image de Next.js (<Image />)

Paso 1: Verificación de compatibilidad del proyecto antes de la migración

Antes de trasladar una aplicación Next.js a Cloudflare Workers, existen 3 elementos clave que deben comprobarse debido a la naturaleza del entorno de ejecución en el Edge.

1. Eliminar vinculaciones nativas de C++ en Node.js

Como Cloudflare Workers se ejecuta en el entorno de aislamiento V8 (workerd), no se pueden utilizar librerías que dependan de módulos nativos de C++ de Node.js como fs, child_process o sqlite3.

• Reemplazar bcrypt -> bcryptjs o la Web Crypto API (crypto.subtle)
• Reemplazar jsonwebtoken -> jose o hono/jwt
• Reemplazar pg / mysql2 -> pg (modo de compatibilidad Node-compat) o Cloudflare Hyperdrive / Drizzle ORM

2. Verificar el flag de entorno nodejs_compat

Las versiones más recientes de OpenNext de 2025/2026 utilizan el flag de compatibilidad nodejs_compat de Cloudflare para ofrecer soporte nativo a la mayoría de las API fundamentales de Node.js, como Buffer, process, AsyncLocalStorage y stream.

Paso 2: Instalación y configuración de @opennextjs/cloudflare

Realice la instalación en el directorio raíz de su proyecto Next.js existente.

Instalación de paquetes

# Instalación del adaptador OpenNext Cloudflare y Wrangler
npm install --save-dev @opennextjs/cloudflare wrangler@latest

Creación de open-next.config.ts

Cree el archivo de configuración de OpenNext (open-next.config.ts) en la raíz del proyecto.

// open-next.config.ts
import type { OpenNextConfig } from "@opennextjs/aws/types/open-next.js";
import cache from "@opennextjs/cloudflare/kv-cache";

const config: OpenNextConfig = {
  default: {
    override: {
      wrapper: "cloudflare-node",
      converter: "edge",
      // Vinculación de Cloudflare KV para ISR y almacenamiento en caché
      incrementalCache: async () => cache,
      tagCache: async () => cache,
      queue: "dummy",
    },
  },
  middleware: {
    external: true,
    override: {
      wrapper: "cloudflare-edge",
      converter: "edge",
    },
  },
};

export default config;

Creación de wrangler.jsonc

Añada la configuración de Workers y caché KV al archivo wrangler.jsonc para el despliegue en Cloudflare.

// wrangler.jsonc
{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "my-nextjs-app",
  "main": ".open-next/worker.js",
  "compatibility_date": "2026-01-01",
  "compatibility_flags": ["nodejs_compat"],

  // Servir activos estáticos de Next.js (CSS, JS, imágenes) mediante Workers Static Assets
  "assets": {
    "directory": ".open-next/assets",
    "binding": "ASSETS"
  },

  // Namespace de KV para el almacenamiento de caché ISR
  "kv_namespaces": [
    {
      "binding": "NEXT_CACHE_WORKERS_KV",
      "id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    }
  ],

  // Configuración de Smart Placement e Hyperdrive al conectar con bases de datos
  "placement": {
    "mode": "smart"
  }
}

Paso 3: Pipeline de compilación y despliegue local

Modifique los scripts en package.json para integrar la compilación de OpenNext con el despliegue de Wrangler.

// package.json
{
  "name": "my-nextjs-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "build:worker": "opennextjs-cloudflare build",
    "preview": "opennextjs-cloudflare build && wrangler dev",
    "deploy": "opennextjs-cloudflare build && wrangler deploy"
  }
}

Prueba de vista previa local

Antes de desplegar, pruebe en su entorno local si Next.js funciona correctamente sobre el entorno de ejecución workerd de Cloudflare.

npm run preview

Cuando se muestre la dirección local (http://localhost:8787) en la terminal, verifique en el navegador que Server Actions, el enrutamiento y el renderizado de páginas SSR funcionen sin inconvenientes.

Ejecución del despliegue en Cloudflare

npm run deploy

¡En tan solo 30 segundos, todo el proyecto Next.js se despliega en los 300 nodos Edge de Cloudflare repartidos por todo el mundo!

Paso 4: Pipeline de automatización CI/CD con GitHub Actions

Para reemplazar la función de despliegue automático de Vercel, construya un pipeline de GitHub Actions.

# .github/workflows/deploy.yml
name: Deploy Next.js to Cloudflare Workers

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Build & Deploy
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "npm"

      - name: Install Dependencies
        run: npm ci

      - name: Build OpenNext Worker
        run: npm run build:worker

      - name: Deploy to Cloudflare Workers
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: deploy

Al construir este pipeline, podrá completar un sistema de despliegue automático con un costo de $0 aprovechando los minutos de compilación gratuitos de GitHub Actions, sin las restricciones del límite de tiempo de compilación del Plan Vercel Pro.

Resolución de problemas en la práctica: Errores frecuentes durante la migración

Error 1: Dynamic Code Evaluation (eval) is not allowed

Causa: Si algunos paquetes (por ejemplo, ORM antiguos o motores de plantillas) utilizan internamente eval() o new Function(), quedan bloqueados por la política de seguridad de workerd.

Solución: Añada la configuración de destino de Webpack y avisos en next.config.js o actualice los módulos a sus versiones más recientes.

// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      config.ignoreWarnings = [{ module: /node_modules/ }];
    }
    return config;
  },
};

Error 2: ISR revalidatePath no funciona

Causa: El nombre de la vinculación del namespace de KV no coincide con el nombre esperado por OpenNext.

Solución: En wrangler.jsonc, especifique obligatoriamente el nombre de binding en kv_namespaces como NEXT_CACHE_WORKERS_KV.

Error 3: No se reconocen las variables de entorno (process.env)

Causa: Cloudflare Workers distingue entre las variables de entorno inyectadas en tiempo de compilación (build time) y en tiempo de ejecución (runtime).

Solución: Para las variables del archivo .env que deban exponerse al cliente, añada el prefijo NEXT_PUBLIC_, y para las claves de seguridad exclusivas del servidor, inyéctelas con el comando wrangler secret put.

npx wrangler secret put DATABASE_URL

Caso de éxito de migración: Reporte de reducción de costos

Este es el reporte de resultados real de la migración de Vercel a Cloudflare Workers OpenNext realizada por la empresa tecnológica A, que ofrece un servicio SaaS B2B.

[Antes de la migración: Vercel Enterprise/Pro]
- Promedio de solicitudes mensuales: 85 millones
- Promedio de tráfico Egress mensual: 4.2 TB
- Optimización de imágenes: 120,000 imágenes
- Facturación mensual: $2,840.00 / mes

[Después de la migración: Cloudflare Workers + R2]
- Tarifa base de Workers Paid: $5.00
- Tarifa por solicitudes adicionales: $22.50
- Tarifa por tráfico Egress: $0.00 (gratuito)
- R2 Storage & Image Resizing: $12.00
- Facturación mensual: $39.50 / mes

=> Porcentaje de ahorro total de costos: 98.6% ($2,840 -> $39.50)

La empresa A logró reducir los costos de mantenimiento de infraestructura en más de un 98%, mientras obtenía una mejora de rendimiento al reducir la latencia de Cold Start de 250ms a 12ms en comparación con Vercel.

Conclusión: La elección inteligente para librarse del vendor lock-in

Vercel es la plataforma óptima para crear prototipos rápidos de ideas iniciales. Sin embargo, mantener la costosa política de precios de Vercel cuando el servicio crece y el tráfico se consolida representa una carga crítica para la salud financiera de una empresa.

La combinación de OpenNext y Cloudflare Workers ofrece ventajas extraordinarias:

1. Reutilización del 100% del código Next.js: Conservación perfecta de funciones clave como App Router, Server Actions e ISR
2. $0 en tarifas de tráfico (Egress Free): Sin sorpresas en facturas de transferencia de red, sin importar cuántos usuarios se conecten
3. Renderizado en el Edge global: Respuesta inmediata con Cold Start inferior a 10ms desde nodos Edge en 300 ciudades de todo el mundo

Comience a probar la migración a OpenNext ahora mismo con pequeños subproyectos y experimente una impresionante innovación en su infraestructura reduciendo la factura mensual en más de un 90%.

Artículo relacionado: Consulte también la guía de construcción de bases de datos en el Edge en Drizzle ORM + Cloudflare D1: Arquitectura SQLite en el Edge con 99% de reducción de bundle.