¿Cómo usar un dominio personalizado registrado con AWS Route 53 en una aplicación web Next.js implementada en Vercel?

TLDR

Actualiza los servidores de nombres del dominio de AWS Route 53 o, los tipos de registros A y CNAME con los valores proporcionados por Vercel bajo ProjectName / Settings / Domains después de que agregaste un dominio al proyecto.

Mostrará la información necesaria para configurar midominio.com y redirigir a www.midominio.com o viceversa. Después de que intentaste agregar el dominio a tu proyecto sin éxito, esa información también se enviará a tu correo electrónico explicando qué hacer.

Vercel te permite configurar registros A (recomendado) y CNAME.

Algo de antecedentes

A partir del 30 de junio de 2021 AWS Amplify no soporta todas las características de Next.js. Entonces si estás ansioso por usar el excelente Componente de Imagen, Regeneración Estática Incremental (ISR), Rutas Catch All Opcionales u otras características de Next.js 10+ con AWS Amplify tienes que esperar y tu mejor opción es desplegar en Vercel.

Pero sabemos que el tiempo es un recurso escaso y tenemos que mantener la canalización de características en funcionamiento por el bien del negocio.

Las optimizaciones de SEO y rendimiento del sitio web se debían ayer. Nuestra investigación indica que Next.js es imprescindible para una mejor Experiencia de Desarrollador y Experiencia de Usuario. El Componente de Imagen y la Optimización Automática de Imágenes impactan directamente la experiencia del usuario evitando Cumulative Layout Shift y siendo lazy loaded por defecto, así aumentando la velocidad de la página.

Next.js hace el trabajo pesado para nosotros, simples desarrolladores: cambio de tamaño de imagen, optimización y entrega en formatos modernos desde una variedad de fuentes. Optimización de imagen bajo demanda que no aumenta los tiempos de compilación.

Lo siento AWS pero necesito esas características y no puedo esperar por ti. Tienes excelentes servicios pero tus capacidades de renderización del servidor (SSR) y la integración de Next.js no coinciden con mis casos de uso. Pero al menos obtuviste el dominio registrado, y si sigue funcionando como se espera con el despliegue en Vercel, no lo transferiré a Vercel.

Lado de Vercel

Asumiendo que tienes tu proyecto desplegado en Vercel, solo tienes que agregar el dominio personalizado. Si necesitas hacer configuración avanzada puedes verificar la documentación.

Por ahora intentaré mantenerlo simple basado en mi experiencia.

En la configuración del proyecto en el panel de Vercel, hay un enlace Domain donde puedes agregar tu midominio.com. Si no tienes un dominio también podrías comprarlo con Vercel, AWS Route 53 o tu proveedor de elección.

Después de que hagas clic en el botón Add, el servicio indicará cualquier configuración inválida para el Registro A o los Servidores de nombres (en cada pestaña) y recomendará qué hacer.

También te enviará correos electrónicos con los valores para los tipos de registros A y CNAME, y los servidores de nombres necesarios para actualizar tus registros DNS del proveedor.

Para midominio.com

Para configurar el dominio, establece el siguiente registro en tu proveedor DNS (recomendado):

nombre	tipo	valor
@	A	76.76.21.21

Alternativamente, también puedes cambiar los servidores de nombres de tu dominio al siguiente conjunto previsto:

• ns1.vercel-dns.com
• ns2.vercel-dns.com

Para www.midominio.com

Para configurar el dominio, establece el siguiente registro en tu proveedor DNS (recomendado):

nombre	tipo	valor
www	CNAME	cname.vercel-dns.com

Alternativamente, también puedes cambiar los servidores de nombres de tu dominio al siguiente conjunto previsto:

• ns1.vercel-dns.com
• ns2.vercel-dns.com

¡Seguido por un correo electrónico con el esperado configurado exitosamente después de todo el trabajo duro!

Si no estás familiarizado con la terminología de DNS relevante para esta tarea, aquí está la explicación de Vercel, puedes verificar la guía completa si no hay prisa.

... se te presentarán diferentes métodos para configurarlo, dependiendo de si es un dominio apex (ejemplo.com) o subdominio (docs.ejemplo.com).

Los dominios apex pueden configurarse con un registro A, mientras que los subdominios pueden configurarse con un registro CNAME. Ambos tipos de dominio también pueden configurarse usando el método de Servidores de nombres.

Lado de AWS Route 53

Siempre después de actualizar los servidores de nombres o, los registros A y CNAME debes esperar algo de tiempo para que los cambios se apliquen.

El tiempo de espera es diferente para cada proveedor. Deberías llamar al servicio de atención al cliente si tarda demasiado.

Con AWS Route 53 me tomó algunos minutos ver mi sitio web en vivo nuevamente.

Servidores de nombres

Los servidores de nombres asociados con tu dominio registrado en AWS Route 53 deberían encontrarse en tu Route 53 / Domains / Registered Domains / midominio.com / Name Servers. Se ven así:

• ns-123.awsdns-31.net
• ns-4567.awsdns-63.co.uk
• ns-432.awsdns-50.com
• ns-7654.awsdns-50.org

Reemplaza esos servidores de nombres awsdns en Route 53 / Domains / Registered Domains / midominio.com / Name Servers / Add or edit name servers con los Servidores de nombres previstos de Vercel que se recomiendan bajo la pestaña de Servidores de nombres. Deberían verse así:

• ns1.vercel-dns.com
• ns2.vercel-dns.com

Registro A

Copia el valor del Registro A desde tu panel de proyecto en Vercel. Debería verse como 76.76.21.21.

Ve a tu AWS Route 53 / Hosted Zones / midominio.com / Create Record (debería ser un registro A por defecto, si no, selecciona un tipo A de la lista desplegable Tipo de Registro), y pégalo en el campo Valor.

Si necesitas información adicional para cada campo puedes hacer clic en el enlace Info sobre el campo o consultar la documentación de Amazon Route 53. Deja el campo name vacío y debería tomar un valor por defecto válido.

Haz lo mismo para el tipo CNAME, copia tu valor de registro CNAME de Vercel cname.vercel-dns.com y pégalo en el campo de valor de Registro de Route 53. El campo name debería ser www en este caso, u otro que Vercel te recomiende.