Next.js y Vercel

Vercel está creado por los desarrolladores de Next.js y ofrece soporte de primera clase para Next.js. Cuando despliegas tu aplicación Next.js en Vercel, ocurre lo siguiente por defecto:

• Las páginas que usan Generación Estática y los recursos (JS, CSS, imágenes, fuentes, etc.) se servirán automáticamente desde la CDN de Vercel, que es extremadamente rápida.
• Las páginas que usan Renderizado del lado del servidor (SSR) y rutas API se convertirán automáticamente en Funciones Serverless aisladas. Esto permite que el renderizado de páginas y las solicitudes API escalen infinitamente.

Vercel tiene muchas más características, como:

• Dominios personalizados: Una vez desplegado en Vercel, puedes asignar un dominio personalizado a tu aplicación Next.js. Consulta nuestra documentación aquí.

• Variables de entorno: También puedes configurar variables de entorno en Vercel. Consulta nuestra documentación aquí. Luego puedes usar esas variables de entorno en tu aplicación Next.js.

• HTTPS automático: HTTPS está habilitado por defecto (incluyendo dominios personalizados) y no requiere configuración adicional. Renovamos automáticamente los certificados SSL.

Puedes aprender más sobre la plataforma en la documentación de Vercel.

Despliegue de vista previa para cada cambio

Los pasos a continuación son opcionales — puedes probarlos o simplemente leerlos.

Después de desplegar en Vercel, intenta hacer lo siguiente si puedes:

• Crea una nueva rama en tu aplicación.
• Realiza algunos cambios y haz push a GitHub.
• Crea un nuevo pull request (página de ayuda de GitHub).

Deberías ver un comentario del bot vercel en la página del pull request.

Intenta hacer clic en la URL de Vista previa dentro de este comentario. Deberías ver los cambios que acabas de realizar.

Cuando tienes un pull request abierto, Vercel crea automáticamente un despliegue de vista previa para esa rama en cada push. La URL de vista previa siempre apuntará al último despliegue de vista previa.

Puedes compartir esta URL de vista previa con tus colaboradores y obtener retroalimentación inmediata.

Si tu despliegue de vista previa se ve bien, fusiónalo a main. Cuando hagas esto, Vercel creará automáticamente un despliegue de producción.

Desarrollar, Previsualizar, Desplegar

Acabamos de revisar el flujo de trabajo que llamamos DPD: Desarrollar, Previsualizar y Desplegar.

• Desarrollar: Hemos escrito código en Next.js y usado el servidor de desarrollo de Next.js para aprovechar su función de recarga en caliente.
• Previsualizar: Hemos enviado cambios a una rama en GitHub, y Vercel creó un despliegue de vista previa disponible a través de una URL. Podemos compartir esta URL de vista previa con otros para obtener retroalimentación. Además de hacer revisiones de código, puedes hacer previsualizaciones de despliegue.
• Desplegar: Hemos fusionado el pull request a main para desplegar en producción.

Recomendamos encarecidamente usar este flujo de trabajo al desarrollar aplicaciones Next.js — te ayudará a iterar en tu aplicación más rápido.