Desplegando en Vercel con dominio en Cloudflare: paso a paso

Vercel + Cloudflare es una combinación potente para desplegar webs rápidas con buen control sobre el dominio. Pero la configuración tiene trampas que no aparecen en la documentación oficial. Esto es lo que he aprendido desplegando múltiples proyectos con este stack.

Por qué Cloudflare para el dominio

Cloudflare ofrece registrar dominios a precio de coste, sin margen de beneficio. Eso ya es razón suficiente. Pero además: DNS propagation casi instantáneo, SSL automático, proxy con protección DDoS y una UI que no te hace perder tiempo.

El setup básico

Paso 1: Importar proyecto en Vercel. Conecta tu repo de GitHub, selecciona el framework (Next.js se detecta automáticamente) y haz el primer deploy. Vercel te dará un dominio .vercel.app que funciona inmediatamente.

Paso 2: Añadir dominio custom en Vercel. En Settings → Domains, añade tu dominio. Vercel te dará los registros DNS que necesitas configurar.

Paso 3: Configurar DNS en Cloudflare. Aquí está la trampa. Vercel te pide un registro CNAME que apunte a cname.vercel-dns.com. En Cloudflare, crea el CNAME y asegúrate de que el proxy de Cloudflare esté desactivado (icono de nube gris, no naranja).

La trampa del proxy de Cloudflare

Si dejas el proxy de Cloudflare activo (nube naranja), Cloudflare intercepta el tráfico y puede interferir con el SSL y el routing de Vercel. El resultado: redirecciones infinitas, errores 521, o la web carga pero los Server Components fallan.

La solución: proxy desactivado para los registros que apuntan a Vercel. Cloudflare sigue gestionando el DNS pero no intercepta el tráfico. Vercel se encarga del SSL y el CDN.

SSL: Full (Strict)

Si por alguna razón necesitas el proxy activo, configura SSL en Cloudflare como Full (Strict). Esto evita las redirecciones infinitas porque Cloudflare valida el certificado de Vercel correctamente.

Environment variables

No olvides configurar NEXT_PUBLIC_SITE_URL en Vercel apuntando a tu dominio final (con https). Si lo dejas con el dominio de Vercel, tus OG images, canonical URLs y sitemap apuntarán al dominio incorrecto.

Cache y headers

Vercel cachea automáticamente los assets estáticos con headers agresivos. Si además tienes el proxy de Cloudflare activo, se suman dos capas de cache. Eso puede crear problemas de stale content cuando deploys cambios.

Mi recomendación: deja que Vercel maneje el cache. Si usas Cloudflare en modo DNS-only, no hay conflicto.

Checklist de deploy

• Repo conectado en Vercel con auto-deploy en push a main.
• Dominio custom configurado en Vercel.
• CNAME en Cloudflare apuntando a cname.vercel-dns.com sin proxy.
• NEXT_PUBLIC_SITE_URL con el dominio final.
• Test de OG image con el debugger de Facebook y Twitter Card Validator.
• Verificación de SSL con curl -I https://tudominio.com.

Conclusión

Vercel + Cloudflare es un stack de deploy sólido y económico. La configuración tiene sus trampas, especialmente con el proxy y el SSL, pero una vez resueltas tienes un setup que funciona sin mantenimiento. Ideal para freelance donde cada minuto de DevOps es un minuto que no facturas.