Elige tu Dominio y Lanzar Tu Web

¡Hola, equipo 10xDev!

Tienes una idea brillante. Has estado trabajando incansablemente en tu aplicación web o tu MVP de SaaS usando Next.js y el stack moderno que amas. El código está listo, las funcionalidades principales están pulidas... ¡pero ahora necesitas que el mundo lo vea!

Lanzar al público implica dar el paso crucial de poner tu código en un servidor accesible a través de internet. Esto, a menudo, comienza con algo fundamental: tu propio dominio. Luego viene la configuración técnica: los DNS, el hosting, la conexión entre ellos.

Para muchos, especialmente si es la primera vez, este proceso puede sentirse abrumador. ¿Dónde compro el dominio? ¿Qué son los DNS? ¿Cómo conecto todo?

Este artículo es tu guía completa para desmitificar el lanzamiento. Vamos a recorrer el camino desde la adquisición de tu dominio hasta tener tu aplicación Next.js corriendo en Vercel, gestionada eficientemente con Cloudflare. Utilizaremos herramientas populares y fiables, alineadas con un flujo de trabajo de desarrollo moderno y ágil.

¡Prepárate para llevar tu proyecto de la idea a estar en el aire!

Paso 1: Comprar Tu Dominio en Namecheap#

Elegir un buen registrador de dominios es importante. Queremos uno que sea fiable, tenga precios competitivos y una interfaz sencilla Namecheap es una opción muy popular y recomendada.

1 Busca tu Dominio Ideal: Ve a Namecheap.com y utiliza su barra de búsqueda para encontrar el dominio que deseas (ej: tuincreiblesaas.com). 2 Explora Opciones: Namecheap te mostrará si está disponible y sugerirá otras extensiones (.org, .net, .io, .app, etc.). Elige la que mejor se adapte a tu proyecto y audiencia. 3 Añadir al Carrito y Comprar: Una vez que encuentres el dominio perfecto, añádelo a tu carrito. Revisa los extras que te ofrecen (protección Whois, email, etc.). La protección Whois (WhoisGuard) suele ser gratuita de por vida en Namecheap y es muy recomendable para proteger tu información personal. Completa el proceso de compra. 4 Verifica la Propiedad: Namecheap te enviará un email para verificar que eres el propietario del email asociado a la cuenta. ¡No te saltes este paso! Es crucial para mantener el control de tu dominio.

¡Felicidades! Ya eres el orgulloso propietario de tu propio dominio.

Paso 2: Transferir la Gestión de DNS a Cloudflare#

Aunque Namecheap puede gestionar tus DNS, trasladar esta función a Cloudflare tiene enormes ventajas:

• CDN Gratuita: Acelera la carga de tu sitio almacenando copias en servidores de todo el mundo.
• Seguridad: Protección contra ataques DDoS básicos, certificado SSL gratuito y fácil de configurar.
• Rendimiento: Optimización de imágenes, minificación de código.
• Gestión Sencilla: Un panel de control de DNS potente e intuitivo.
• Workers: Funcionalidad serverless en el Edge (más avanzado).

¡Y muchas de estas funciones son gratuitas!

1 Regístrate en Cloudflare: Si aún no tienes una cuenta, ve a Cloudflare.com y regístrate. 2 Añade Tu Sitio: Una vez dentro, haz clic en "Add Site" e introduce tu nuevo dominio. 3 Selecciona el Plan: Elige el plan "Free". 4 Cloudflare Escanea Tus Registros DNS: Cloudflare intentará importar automáticamente tus registros DNS existentes de Namecheap. Revisa que parezca correcto, aunque es probable que necesites ajustarlos más adelante. 5 Cambia los Nameservers en Namecheap: Este es el paso clave. Cloudflare te proporcionará dos Nameservers (ej: adal.ns.cloudflare.com, penny.ns.cloudflare.com).

• Ve al panel de control de tu cuenta de Namecheap.
• Busca la gestión de tu dominio recién comprado.
• En la sección de "Nameservers", cambia la opción de "Namecheap BasicDNS" a "Custom DNS".
• Introduce los dos Nameservers que te dio Cloudflare.
• Guarda los cambios.

Este cambio puede tardar entre unos minutos y hasta 48 horas en propagarse por internet, aunque generalmente es mucho más rápido (una o dos horas). Tu dominio ahora está "apuntando" a Cloudflare para gestionar todas las solicitudes.

Paso 3: Configurar Registros DNS Clave en Cloudflare#

Ahora que Cloudflare es tu gestor de DNS, necesitas decirle dónde encontrar tu aplicación web. Esto se hace mediante la creación de registros DNS.

1 Ve a la Sección DNS en Cloudflare: En tu panel de Cloudflare, selecciona tu dominio y luego ve a la pestaña "DNS". 2 Entiende los Registros Comunes:

• A (Address): Apunta un nombre de dominio (o subdominio) a una dirección IP (IPv4).
• CNAME (Canonical Name): Apunta un nombre de dominio (o subdominio) a otro nombre de dominio. Esto es muy común para integrar servicios de hosting como Vercel.
• MX (Mail Exchanger): Especifica los servidores de correo para tu dominio (necesario si usas Zoho Mail u otro servicio de email con tu dominio).
• TXT (Text): Registros de texto para verificación (ej: para probar que eres dueño del dominio para servicios como Google o para registros SPF/DKIM de email). 3 Configura los Registros para Vercel: Vercel te dirá exactamente qué registros necesitas añadir. Generalmente, implican:
• Un registro A o AAAA (si usas IPv6) para el dominio raíz (@) apuntando a la IP(s) de Vercel.
• Un registro CNAME para www apuntando a cname.vercel-dns.com.

Ejemplo (verifica siempre la documentación actual de Vercel): Haz clic en "Add record".

• Type: A

• Name: @ (esto representa el dominio raíz, ej: tudominio.com)

• IPv4 address: 76.76.21.21 (Esta es una IP genérica de Vercel, verifica la IP actual en tu dashboard de Vercel)

• Proxy status: Proxied (esto activa la CDN y seguridad de Cloudflare, ¡déjalo así!)

• TTL: Auto

• Type: CNAME

• Name: www

• Target: cname.vercel-dns.com (verifica este valor en tu dashboard de Vercel)

• Proxy status: Proxied

• TTL: Auto

4 Añade Otros Registros (Opcional pero Común):

• Registros MX: Si configuraste Zoho Mail (como vimos en el artículo anterior) o Google Workspace, deberás añadir los registros MX que te proporcionen.
• Registros TXT: Lo mismo para registros SPF, DKIM o verificaciones de dominio para otros servicios.

Paso 4: Preparando Tu Proyecto Next.js para el Despliegue#

Asegúrate de que tu proyecto Next.js esté listo:

• Control de Versiones: Tu código debe estar en un repositorio Git (GitHub, GitLab, Bitbucket). Vercel se integra directamente con ellos.
• Variables de Entorno: Si usas variables de entorno (para claves de API, credenciales de base de datos, etc.), asegúrate de que estén definidas en tu .env.local (para desarrollo) y planifica cómo las configurarás en Vercel (ver siguiente paso).
• Script de Build: Vercel detectará automáticamente que es un proyecto Next.js, pero asegúrate de que tu package.json tenga un script build válido si has hecho personalizaciones.

Paso 5: Despliegue en Vercel#

Vercel es una plataforma de hosting optimizada para Next.js, ideal para desplegar aplicaciones web y SaaS de forma rápida y eficiente.

1 Regístrate en Vercel: Ve a Vercel.com y regístrate (puedes usar tu cuenta de GitHub, GitLab o Bitbucket). 2 Importa Tu Proyecto Git: Una vez dentro, haz clic en "Add New..." -> "Project". Selecciona el repositorio Git de tu proyecto. 3 Configura el Proyecto: Vercel detectará que es un proyecto Next.js y preconfigurará la mayoría de los ajustes.

• Framework Preset: Next.js.
• Root Directory: Normalmente ..
• Build and Output Settings: Generalmente no necesitas cambiar esto para Next.js.
• Environment Variables: Aquí es donde añades las variables de entorno que tu aplicación necesita en producción (ej: SUPABASE_URL, SUPABASE_SERVICE_KEY, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, etc.) Nunca añadas claves sensibles públicas aquí (las que empiezan con NEXT_PUBLIC_ van en el código, las secretas van aquí). 4 Desplegar: Haz clic en "Deploy". Vercel clonará tu repositorio, instalará dependencias, construirá tu proyecto y lo desplegará. ¡Verás un build en progreso! 5 Despliegue Inicial Completo: Una vez que termine, Vercel te dará una URL de previsualización (ej: tu-proyecto-xxxx.vercel.app). ¡Tu aplicación está en línea!

Paso 6: Conectar Tu Dominio Personalizado en Vercel#

Ahora que tu aplicación está desplegada y tu dominio está gestionado por Cloudflare, solo falta conectar ambos.

1 Ve a la Configuración del Proyecto en Vercel: En tu dashboard de Vercel, selecciona tu proyecto y ve a la pestaña "Settings" -> "Domains". 2 Añade Tu Dominio: Introduce tu dominio personalizado (ej: tudominio.com) y haz clic en "Add". 3 Configura los Registros DNS (en Vercel): Vercel te mostrará las instrucciones para configurar los registros DNS Como ya transferimos la gestión de DNS a Cloudflare, debes seguir las instrucciones de Vercel y aplicarlas en el panel de Cloudflare.

• Vercel detectará que estás usando Cloudflare y te dará los registros específicos que necesitas añadir o modificar en tu panel de Cloudflare (generalmente los registros A y CNAME para www que mencionamos antes).
• Vuelve a tu panel de Cloudflare, sección DNS, y asegúrate de que los registros coinciden exactamente con lo que te pide Vercel. A veces, Vercel puede pedirte que configures un registro A para @ apuntando a una IP específica de Vercel, y un CNAME para www apuntando a cname.vercel-dns.com.
• Verifica que el estado del Proxy (la nube naranja) esté ACTIVADO en Cloudflare para esos registros, a menos que Vercel o una configuración específica te pida lo contrario (es raro). 4 Verificación: Vercel intentará verificar que los registros DNS se han configurado correctamente. Esto puede tardar unos minutos. Una vez verificado, tu dominio en Vercel mostrará un estado "Valid".

¡Listo! Ahora, cuando alguien visite tudominio.com (o www.tudominio.com), Cloudflare dirigirá la solicitud a Vercel, que servirá tu aplicación Next.js.

Configuración de Subdominios para Diferentes Entornos#

Es una práctica común tener diferentes versiones de tu aplicación para pruebas (staging) o desarrollo. Los subdominios son perfectos para esto (ej: staging.tudominio.com).

1 Despliega Otra Versión en Vercel: Puedes crear un nuevo proyecto en Vercel apuntando a una rama diferente de tu repositorio Git (ej: staging) o configurar entornos de previsualización automática para cada pull request. 2 Añade el Subdominio en Vercel: En la configuración del proyecto de Vercel, ve a "Settings" -> "Domains" y añade staging.tudominio.com. Vercel te pedirá que configures un registro DNS. 3 Configura el Registro CNAME en Cloudflare: Vercel te dirá el valor del CNAME para tu subdominio (generalmente cname.vercel-dns.com).

• En tu panel de Cloudflare, sección DNS, añade un nuevo registro:
  • Type: CNAME
  • Name: staging (el nombre de tu subdominio)
  • Target: cname.vercel-dns.com (o el valor que te dé Vercel)
  • Proxy status: Proxied
  • TTL: Auto

Después de unos minutos de propagación, staging.tudominio.com apuntará a la versión de tu aplicación desplegada para staging en Vercel. Puedes repetir este proceso para dev.tudominio.com, app.tudominio.com, etc.

Tips Extra para un Lanzamiento Exitoso#

• Configura Redirecciones en Cloudflare: Puedes configurar reglas en Cloudflare para redirigir automáticamente tudominio.com a www.tudominio.com (o viceversa) para evitar contenido duplicado. Ve a "Rules" -> "Page Rules".
• SSL Siempre Activo: Con Cloudflare y Vercel, el certificado SSL (HTTPS) es gratuito y automático. Asegúrate de que esté configurado en "Full (strict)" en Cloudflare (sección SSL/TLS) si usas la proxy de Cloudflare. Vercel también gestiona SSL por sí mismo.
• Optimiza con Cloudflare: Explora las opciones de optimización en Cloudflare (Minify, Brotli, Rocket Loader) para mejorar aún más la velocidad de carga de tu sitio.
• Monitorea el Tráfico: Tanto Vercel como Cloudflare ofrecen paneles para ver el tráfico, builds y posibles errores.

Conclusión#

Lanzar tu aplicación web o SaaS no tiene por qué ser un misterio técnico. Siguiendo estos pasos, has aprendido a adquirir tu identidad en internet (el dominio), a dirigir el tráfico de manera eficiente y segura con Cloudflare, y a desplegar tu código con una plataforma optimizada como Vercel.

Tienes tu dominio comprado en Namecheap, tus DNS bajo el control poderoso de Cloudflare, y tu aplicación Next.js sirviéndose desde Vercel, accesible en tu propio dominio. ¡Eso es un logro enorme!

Este es el ciclo de vida de un proyecto: idear, construir y lanzar. Ya dominas el "lanzar" de forma profesional. ¡Ahora a seguir iterando y haciendo crecer tu producto!

¿Cuál fue tu mayor desafío al lanzar tu primer proyecto? ¡Compártelo en los comentarios!