Desplegar apps con Claude Code en Vercel y Cloudflare (2026)

¿Qué significa desplegar con Claude Code? ¿Puede hacerlo solo?

Si acabas de usar Claude Code para crear una app Next.js o un sitio estático y ahora quieres ponerlo en línea, aquí va la buena noticia: nunca tienes que salir de la terminal. Desplegar con Claude Code simplemente significa dejar que ejecute los comandos del shell por ti: instalar la CLI de la plataforma, iniciar sesión, ejecutar el build, subir el código y luego leer los logs para detectar y corregir errores en bucle.

Lo clave: Claude Code ejecuta comandos de terminal reales. No los simula. Cuando dices "despliega este proyecto en Vercel", de verdad llama a vercel --prod, espera el resultado y, si el build falla, lee el mensaje de error y propone una solución. Eso es justo lo que lo hace distinto de copiar y pegar comandos de un post de blog. Si la herramienta es nueva para ti, échale un vistazo primero a qué es Claude Code para entender cómo ejecuta comandos en una sandbox.

Pero NO "despliega por arte de magia". Hay tres cosas que un humano todavía tiene que hacer:

• Necesitas una cuenta de Vercel o Cloudflare (el plan gratuito basta para empezar).
• La primera vez, el paso de inicio de sesión normalmente abre un navegador para que confirmes: Claude Code no entra a tu cuenta por ti.
• Tú decides la plataforma, el dominio y las variables de entorno: la IA puede sugerir, pero la última palabra es tuya.

En resumen: la IA se encarga del trabajo repetitivo de comandos y de la pesada lectura de logs; tú te encargas de las decisiones y las cuentas. Tener clara esa división mantiene tus expectativas en su sitio.

¿Por qué vale la pena hacerlo así en lugar de desplegar a mano? Tres razones prácticas. Primero, no tienes que memorizar los comandos de cada plataforma: vercel y wrangler tienen sintaxis distintas, y las dos cambian bastante rápido. Segundo, el bucle de corrección es más corto: cuando un build falla, la IA lee el log ahí mismo en lugar de que tú copies el error para buscarlo en la web. Tercero, el contexto se mantiene intacto: Claude Code está en la misma carpeta que acaba de compilar la app, así que conoce la estructura del proyecto, qué framework usaste y dónde queda la salida. Eso marca una gran diferencia frente a pegar comandos de una guía que no sabe nada de tu código.

Antes de desplegar (checklist)

Que un despliegue salga bien se decide, en su mayoría, durante la preparación. Antes de pedirle a Claude Code que envíe la app a producción, confirma todo esto:

• ✓ Repositorio git limpio: todo commiteado, sin cambios sueltos. Si esta parte es nueva para ti, mira el flujo de trabajo con git en Claude Code.
• ✓ El npm run build pasa en tu máquina. Esta es la condición número uno. Si el build falla en local, seguro que fallará en el servidor: no despliegues "solo para ver qué pasa".
• ✓ Conoce tu framework: Next.js, Vite/React o HTML estático. La plataforma y el comando de despliegue cambian según el tipo.
• ✓ Ten una cuenta en Vercel o Cloudflare.
• ✓ El .gitignore ya bloquea el .env y los archivos de lock. Revisa bien esta línea.

Aviso de seguridad: no dejes que Claude Code commitee el .env ni las claves de API al git. Antes de dejar que ejecute git add -A, asegúrate de que el .gitignore contiene .env y .env.local. Los secretos van en el panel de la plataforma o en wrangler secret, no en tu código.

Si tu app tiene un lado servidor (rutas de API, una base de datos), también conviene leer cómo crear back-ends y APIs con Claude Code para saber qué variables de entorno necesita la app antes de ir a producción. Acierta con esta lista y los pasos de despliegue de abajo suelen tomar solo unos minutos.

Método 1 - Desplegar en Vercel con Claude Code

Vercel es la opción más fluida para apps Next.js y SSR: gran parte es casi "clic y listo". Este es el flujo de CLI que puedes pedirle a Claude Code que ejecute paso a paso:

1. Instala la CLI de Vercel: npm i -g vercel
2. Inicia sesión: vercel login - esto abre un navegador para que te autentiques (el paso que haces tú).
3. Vincula el proyecto: vercel link - conecta la carpeta actual con un proyecto en Vercel.
4. Crea una preview: ejecuta vercel (sin flags) para compilar una URL de preview y revisarla primero.
5. Define las variables de entorno: desde el panel de Vercel o con vercel env add VAR_NAME.
6. Publica en producción: vercel --prod.

En Claude Code no necesitas teclear cada comando de arriba. Con un prompt así basta:

Deploy this project to Vercel. Run vercel link first,
create a preview for me to check, then ask me before
running vercel --prod. If the build fails, read the
log and suggest a fix.

Claude Code ejecutará la cadena de comandos, se detendrá en la preview para que la mires y solo publicará en producción cuando tú lo apruebes. Si el build falla, lee la salida de error y lo corrige: aquí es donde "la IA lee el log" ahorra un tiempo evidente.

Novedad en 2026: Vercel tiene un plugin oficial para Claude Code y un conector Vercel MCP que permiten que Claude Code trabaje con Vercel de forma más limpia (gestionar proyectos, leer deployments). Si despliegas en Vercel a menudo, vale la pena probar ambos.

Para Next.js/SSR, la gran ventaja de Vercel es que casi no configuras el runtime: el framework se detecta automáticamente y "solo despliegas". Server Components, rutas de API y middleware corren todos sin adaptador. La contrapartida: los costos pueden dispararse rápido con mucho tráfico (mira la tabla comparativa de abajo).

Usa las previews como se debe: ejecuta siempre vercel (la preview) antes de --prod. Una preview tiene su propia URL y usa exactamente el código que estás a punto de publicar, pero sin tocar a usuarios reales. Abre esa URL, haz clic por algunos flujos principales y solo entonces deja que Claude Code envíe a producción. Es un hábito barato que te evita publicar un build roto en tu dominio principal.

Método 2 - Desplegar en Cloudflare con Claude Code (Pages y Workers)

Cloudflare encaja cuando lo quieres barato, corriendo en la edge o full-stack con Workers (KV, D1, R2). La herramienta principal es wrangler. Los pasos:

1. Instala Wrangler: npm i -g wrangler (o usa npx wrangler para algo rápido de una sola vez).
2. Inicia sesión: wrangler login - abre un navegador para autenticarte.
3. Compila la app: npm run build para generar la carpeta de salida.
4. Despliega en Pages: wrangler pages deploy <build-folder> (por ejemplo dist con Vite, o la carpeta de build de tu framework).
5. Define los secretos: wrangler secret put SECRET_NAME o desde el panel: nunca los dejes fijos en el código.
6. Conecta un dominio + SSL: agrega un dominio personalizado en el panel; Cloudflare aprovisiona el SSL automáticamente.

Un prompt de ejemplo para Claude Code:

Build this app and deploy it to Cloudflare Pages with wrangler.
After it deploys, show me the .pages.dev URL so I can check it.
Remind me which secrets I need to set with wrangler secret put.

La trampa de Next.js en Cloudflare (léela con atención): Next.js no corre directamente en Cloudflare Pages/Workers como lo hace en Vercel. Necesitas una capa de adaptador:

• @cloudflare/next-on-pages - un adaptador que compila Next.js para Cloudflare Pages, corriendo en el runtime de edge.
• OpenNext (@opennextjs/cloudflare) - la dirección más nueva, con mejor soporte para el runtime Node de Workers en apps Next.js complejas. Mira la documentación de OpenNext para Cloudflare.

Ambos suelen requerir habilitar la flag de compatibilidad con Node (nodejs_compat) en tu config. Sáltate ese paso y te toparás con errores de runtime crípticos: es justo lo que dejan fuera las guías solo de Vercel. Puedes decirle a Claude Code: "esta app es Next.js, usa OpenNext para desplegarla en Cloudflare y activa nodejs_compat por mí".

Cloudflare también tiene una documentación de agent-setup para Claude Code que describe cómo conectar un agente de IA a la infraestructura de Cloudflare. Para lógica dinámica (base de datos, caché, almacenamiento de archivos), usa Workers junto con KV/D1/R2 en lugar de meter todo en Pages estáticos: KV para clave-valor rápido, D1 para una base de datos SQL, R2 para almacenamiento de objetos estilo S3 sin cargos de egress. Puedes pedirle a Claude Code que cree los bindings a estos servicios en wrangler.toml y luego escriba el código de lectura/escritura correspondiente.

Comparada con Vercel, la contrapartida de Cloudflare es un poco más de configuración a cambio de más flexibilidad y menor costo a escala. Si tu app es solo estática/SPA, casi no hay contrapartida: Pages toma la carpeta de build y la sirve en la edge de inmediato. Es solo cuando llegas al SSR de Next.js que la complejidad del adaptador aparece de verdad.

¿Vercel o Cloudflare? Una tabla para elegir plataforma

No existe la "mejor plataforma", solo la que encaja con tu tipo de app. La tabla de abajo te ayuda a elegir rápido según el tipo de proyecto que generó Claude Code:

Veredicto rápido: Vercel da la experiencia Next.js más fluida con el mínimo de esfuerzo mental; Cloudflare da bajo costo, la edge y full-stack con Workers. Ambas tienen un plan gratuito de sobra para una app personal o un proyecto paralelo. Si no lo tienes claro, empieza en los dos planes gratuitos, deja que Claude Code despliegue en cada uno y compara.

Cómo manejar los errores de despliegue más comunes

Los despliegues rara vez pasan limpios al primer intento. La fuerza de Claude Code aquí es leer el log de despliegue y corregir en bucle: pegas el error o simplemente le dices "lee esa salida y corrígela". Estos son los errores que más vas a encontrar y cómo manejarlos:

• El build falla la primera vez. Normalmente una dependencia que falta o un script de build equivocado. Dile a Claude Code: "lee el log del build que acaba de fallar, encuentra la dependencia que falta o el script equivocado en package.json y corrígelo". Este es el error más común y también el más fácil de resolver.
• Faltan variables de entorno → la app se despliega, pero muestra una página en blanco o un 500. Revisa si las variables están definidas en el panel; recuerda que las variables locales del .env NO viajan solas al servidor.
• Error de edge-runtime de Next.js en Cloudflare. Señales: "module not found" o una API de Node que no existe. Solución: usa @cloudflare/next-on-pages u OpenNext y habilita nodejs_compat (mira la sección de Cloudflare de arriba).
• Versión de Node incompatible. En local usas Node 20 pero el servidor tiene otro por defecto → resultados de build distintos. Declara la versión en la config del proyecto o en el package.json (engines).
• Commiteaste un secreto sin querer. Si una clave de API acabó en el git, rota (revoca y regenera) la clave de inmediato: borrar el commit no basta, porque la clave ya quedó expuesta en el historial. Luego mueve el secreto al panel/wrangler secret, que es donde va.

Si te topas con un error dentro de la propia sesión de Claude Code (y no del lado de la plataforma), mira los errores comunes de Claude Code. Consejo general: no redespliegues a ciegas; deja siempre que la IA lea el log específico antes de corregir nada.

Automatízalo: git push → en vivo (CI/CD y previews)

Los despliegues manuales por CLI son geniales la primera vez, pero a largo plazo quieres que cada git push salga en vivo automáticamente. Tanto Vercel como Cloudflare Pages permiten conectar directamente a un repositorio de GitHub:

• Conecta el repositorio en el panel de la plataforma → cada push a la rama principal se despliega automáticamente a producción.
• Los despliegues de preview = QA de verdad. Cada pull request obtiene su propia URL de preview para que tú (o quien revise) lo compruebe antes de hacer merge. Es QA casi gratis, así que no lo saltes.
• Rollback con un comando. Si un build nuevo se rompe, vuelve al anterior casi al instante desde el panel: sin pánico.

También puedes pedirle a Claude Code que escriba el archivo de config: vercel.json para Vercel, wrangler.toml para Cloudflare, o un workflow de GitHub Actions si quieres control fino del pipeline. Combinado con el flujo de trabajo con git en Claude Code, obtienes un ciclo de desarrollo ajustado: código → push → preview → merge → en vivo.

Despliega más rápido con una skill lista (ak-deploy)

En lugar de recordar y teclear cada comando vercel/wrangler, puedes usar una skill de despliegue lista. ak-deploy detecta automáticamente el destino del despliegue a partir de la config de tu proyecto o de un archivo docs/deployment.md - soporta Vercel, Cloudflare, Netlify, Railway, Fly.io y muchos más - así que normalmente una frase como "despliega esta app" basta para que elija el flujo correcto. Para infraestructura más pesada (Cloudflare Workers/R2/D1, Docker, Kubernetes), ak-devops se encarga de ese lado.

Estas skills viven en el Engineer Kit (que incluye la skill ak-deploy) - parte del bundle AgentKit para Claude Code — ahora $149 (de $198) (agentkit.best, usando la CLI ak). Para dejarlo claro y evitar confusiones: este es AgentKit, un paquete de skills/agentes para Claude Code, que es completamente distinto del AgentKit de OpenAI. El Engineer Kit cuesta $99 (la página no indica ninguna cuota recurrente), con actualizaciones de por vida y garantía de devolución. Si primero quieres entender cómo funcionan las skills en Claude Code, mira qué son las skills en Claude Code.

Preguntas frecuentes (FAQ)

¿Puede Claude Code desplegar solo?

Sí - Claude Code ejecuta comandos de terminal reales, así que corre vercel/wrangler por ti: instala la CLI, compila, despliega y lee los logs para corregir errores. Pero todavía necesitas una cuenta de Vercel/Cloudflare y sigues haciendo tú el primer inicio de sesión.

¿Vercel o Cloudflare es más barato, y puedo usarlos gratis?

Ambos tienen un plan gratuito de sobra para una app personal o un proyecto paralelo. Cloudflare suele ser más barato con tráfico alto y para apps estáticas/de edge; Vercel es más fluido para Next.js/SSR. Revisa la página de precios para los límites exactos antes de escalar.

¿Qué necesito para desplegar Next.js en Cloudflare?

Next.js no corre directamente en Cloudflare. Necesitas el adaptador @cloudflare/next-on-pages u OpenNext (@opennextjs/cloudflare), y normalmente tienes que habilitar la flag de compatibilidad con Node (nodejs_compat). En Vercel no necesitas este paso.

¿Puede Claude Code filtrar mis secretos?

Solo si dejas que commitee el .env/las claves de API al git. Evítalo: agrega el .env al .gitignore y carga los secretos desde el panel o con wrangler secret put. Si una clave se filtra, rótala (regenérala) enseguida, porque ya está en el historial de git.

¿Cuál es la forma más rápida de desplegar HTML estático?

Para un sitio estático, el camino más rápido es wrangler pages deploy <folder> a Cloudflare Pages, o ejecutar vercel en la carpeta del proyecto. Pídele a Claude Code que ejecute el comando y te entregue la URL en vivo para revisarla.

¿Cómo hago rollback cuando un build nuevo se rompe?

Tanto Vercel como Cloudflare Pages te permiten volver al deployment anterior directamente desde el panel, casi al instante. Como cada despliegue es su propio build inmutable, el rollback es muy seguro: sin necesidad de recompilar.

Conclusión y próximos pasos

Desplegar con Claude Code se reduce a un principio: deja que la IA ejecute los comandos y lea los logs, mientras tú decides la plataforma y las cuentas. Elige Vercel para Next.js y una DX fluida, elige Cloudflare para algo barato, en la edge y full-stack con Workers. Ten un repositorio limpio, un build que corre en local y los secretos fuera del git, y ya habrás esquivado el 80% de los problemas.

Siguiente paso: si tu app tiene un lado servidor, mira cómo crear back-ends y APIs con Claude Code; para automatizar el push-a-producción, mira el flujo de trabajo con git en Claude Code.