Por qué despliego la mayoría de mis proyectos Next.js en Cloudflare con OpenNext

He implementado varios proyectos de Next.js en Cloudflare durante el último año, incluyendo Learn English Sounds (una plataforma de pronunciación con más de 900 publicaciones de blog en 4 idiomas, manejando alrededor de 10K sesiones al mes), este sitio de portafolio y algunos otros.

He probado Vercel, AWS, Google Cloud y alojamiento propio. Siempre vuelvo a Next.js + OpenNext + Cloudflare. No siempre. Mi aplicación de entrenamiento de acento en accent.learnenglishsounds.com se ejecuta en Firebase Hosting con un backend de Cloud Run porque eso tenía más sentido allí. Pero para sitios con mucho contenido, Cloudflare es mi opción predeterminada ahora.

Algo interesante: recientemente noté que sitios del gobierno federal como techforce.gov, safedc.gov y americabydesign.gov utilizan exactamente esta pila. Next.js en Cloudflare a través de OpenNext. Si los federales confían en ello para cosas de alto perfil, claramente está listo para producción.

¿Qué es OpenNext?

Aquí está el problema: Next.js está construido por Vercel, y las mejores características (ISR, middleware, optimización de imágenes) están integradas en la infraestructura de Vercel. Si implementas en otro lugar, pierdes funcionalidades.

OpenNext soluciona esto. El paquete @opennextjs/cloudflare convierte tu compilación de Next.js en algo que Cloudflare Workers puede ejecutar de forma nativa: App Router, componentes de servidor, rutas de API, todo.

¿Por qué Cloudflare sobre Vercel?

Vercel es genial. La experiencia de desarrollo (DX) es genuinamente de primera clase. Pero aquí están las razones por las que me cambié:

1. Costo a escala

El nivel gratuito de Vercel es generoso para proyectos personales, pero los costos aumentan rápidamente con el tráfico. Recibí una factura de $130 un mes. Para ser justos, Vercel me reembolsó parte después de que me puse en contacto. Pero para sitios de contenido sencillos, ese tipo de sorpresa no es sostenible. Learn English Sounds atiende a miles de visitantes diarios en 4 idiomas, y solo el ancho de banda mantendría esas facturas en aumento.

Cloudflare me ofrece:

• Ancho de banda ilimitado (todos los planes)
• 500 compilaciones/mes gratis, ilimitadas en planes de pago
• Distribución CDN a más de 300 ubicaciones perimetrales (edge locations)

Pago $5/mes por el plan de pago de Workers. Eso cubre múltiples sitios de producción.

2. Rendimiento global

La red perimetral de Cloudflare es masiva. Los activos estáticos se almacenan en caché en ubicaciones perimetrales de todo el mundo. Con s-maxage=31536000, los visitantes recurrentes obtienen cargas casi instantáneas.

3. Ecosistema integrado

Cloudflare no es solo alojamiento. Utilizo:

• Cloudflare Images: Optimización y redimensionamiento automático de imágenes
• Turnstile: Protección contra bots sin CAPTCHAs molestos
• D1: SQLite sin servidor para necesidades básicas de bases de datos
• KV: Almacenamiento de clave-valor para caché y configuración
• Workers: Funciones perimetrales cuando necesito lógica personalizada

Un panel de control, una factura.

La configuración

Aquí hay una implementación típica:

1. Instalar dependencias

npm install @opennextjs/cloudflare

2. Configurar OpenNext

Crea open-next.config.ts:

import { defineCloudflareConfig } from "@opennextjs/cloudflare";

export default defineCloudflareConfig({});

3. Añadir wrangler.toml

name = "my-nextjs-site"
main = ".open-next/worker.js"
compatibility_date = "2025-09-11"
compatibility_flags = ["nodejs_compat"]

[assets]
  directory = ".open-next/assets"
  binding = "ASSETS"

4. Compilar e implementar

npx opennextjs-cloudflare build
npx wrangler deploy

Listo. Estás ejecutándote en Cloudflare Workers.

Qué funciona bien

• App Router: Soporte completo para RSC, layouts, estados de carga
• Rutas de API: Funcionan tanto las de pages/api como las de app/api
• Middleware: Se ejecuta en el borde (edge) con acceso completo a la API de Request/Response
• Generación Estática: generateStaticParams funciona como se espera
• Optimización de Imágenes: Funciona a través de Cloudflare Images

Algunas cosas a tener en cuenta

Algunas cosas a vigilar:

• Limitaciones de ISR: La Regeneración Estática Incremental funciona de manera diferente. Yo uso patrones stale-while-revalidate en su lugar.
• APIs de Node.js: Algunas APIs de Node no están disponibles en Workers. Intenta usar APIs Web siempre que sea posible.
• Tiempos de compilación: Los sitios grandes tardan más ya que todo se compila a código compatible con el borde (edge).
• Depuración: Los mensajes de error pueden ser crípticos. Usa wrangler dev localmente para detectar problemas temprano.

Cuándo usar esta pila

Funciona mejor para:

• Sitios con mucho contenido (blogs, documentación, páginas de marketing)
• Aplicaciones multilingües
• Proyectos donde la previsibilidad de costos es importante
• Equipos que ya usan Cloudflare para DNS o seguridad

Primeros pasos

Si quieres probar esto:

1. Consulta la documentación de OpenNext para Cloudflare
2. Comienza con un proyecto simple para entender el proceso de compilación
3. Usa wrangler dev para el desarrollo local
4. Configura implementaciones de vista previa (preview deployments) para las solicitudes de extracción (pull requests)

La curva de aprendizaje es mínima si ya conoces Next.js. La mayor parte de tu código permanece igual.