Despliegue

¡Felicitaciones! Estás aquí porque estás listo para desplegar tu aplicación Next.js. Esta página mostrará cómo desplegarla de forma gestionada o autoalojada usando la API de compilación de Next.js.

API de compilación de Next.js

next build genera una versión optimizada de tu aplicación para producción. Esta salida estándar incluye:

• Archivos HTML para páginas que usan getStaticProps o Optimización estática automática
• Archivos CSS para estilos globales o estilos con alcance individual
• JavaScript para pre-renderizar contenido dinámico desde el servidor de Next.js
• JavaScript para interactividad en el lado del cliente a través de React

Esta salida se genera dentro de la carpeta .next:

• .next/static/chunks/pages – Cada archivo JavaScript dentro de esta carpeta se relaciona con la ruta del mismo nombre. Por ejemplo, .next/static/chunks/pages/about.js sería el archivo JavaScript cargado al ver la ruta /about en tu aplicación
• .next/static/media – Imágenes importadas estáticamente desde next/image se hashean y copian aquí
• .next/static/css – Archivos CSS globales para todas las páginas de tu aplicación
• .next/server/pages – Los puntos de entrada HTML y JavaScript pre-renderizados desde el servidor. Los archivos .nft.json se crean cuando Output File Tracing está habilitado y contienen todas las rutas de archivos que dependen de una página dada.
• .next/server/chunks – Fragmentos JavaScript compartidos usados en múltiples lugares de tu aplicación
• .next/cache – Salida para la caché de compilación e imágenes, respuestas y páginas cacheadas del servidor Next.js. Usar caché ayuda a reducir tiempos de compilación y mejorar el rendimiento al cargar imágenes

Todo el código JavaScript dentro de .next ha sido compilado y los paquetes del navegador han sido minificados para ayudar a lograr el mejor rendimiento y soportar todos los navegadores modernos.

Next.js gestionado con Vercel

Vercel es la forma más rápida de desplegar tu aplicación Next.js con configuración cero.

Al desplegar en Vercel, la plataforma detecta automáticamente Next.js, ejecuta next build y optimiza la salida de compilación por ti, incluyendo:

• Persistencia de activos cacheados entre despliegues si no han cambiado
• Despliegues inmutables con una URL única para cada commit
• Las páginas se optimizan estáticamente de forma automática, cuando es posible
• Los activos (JavaScript, CSS, imágenes, fuentes) se comprimen y sirven desde una Red Global Edge
• Las Rutas API se optimizan automáticamente como Funciones Serverless aisladas que pueden escalar infinitamente
• El Middleware se optimiza automáticamente como Funciones Edge que tienen cero tiempos de arranque y se inician instantáneamente

Además, Vercel proporciona características como:

• Monitoreo automático de rendimiento con Next.js Speed Insights
• HTTPS y certificados SSL automáticos
• CI/CD automático (a través de GitHub, GitLab, Bitbucket, etc.)
• Soporte para Variables de Entorno
• Soporte para Dominios Personalizados
• Soporte para Optimización de Imágenes con next/image
• Despliegues globales instantáneos mediante git push

Despliega una aplicación Next.js en Vercel gratis para probarlo.

Autoalojamiento

Puedes autoalojar Next.js con soporte para todas las características usando Node.js o Docker. También puedes hacer una Exportación HTML Estática, que tiene algunas limitaciones.

Servidor Node.js

Next.js puede desplegarse en cualquier proveedor de alojamiento que soporte Node.js. Por ejemplo, AWS EC2 o un DigitalOcean Droplet.

Primero, asegúrate de que tu package.json tenga los scripts "build" y "start":

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Luego, ejecuta npm run build para construir tu aplicación. Finalmente, ejecuta npm run start para iniciar el servidor Node.js. Este servidor soporta todas las características de Next.js.

Si estás usando next/image, considera añadir sharp para una Optimización de Imágenes más performante en tu entorno de producción ejecutando npm install sharp en el directorio de tu proyecto. En plataformas Linux, sharp puede requerir configuración adicional para evitar uso excesivo de memoria.

Imagen Docker

Next.js puede desplegarse en cualquier proveedor de alojamiento que soporte contenedores Docker. Puedes usar este enfoque al desplegar en orquestadores de contenedores como Kubernetes o HashiCorp Nomad, o al ejecutar dentro de un solo nodo en cualquier proveedor de nube.

1. Instala Docker en tu máquina
2. Clona el ejemplo with-docker
3. Construye tu contenedor: docker build -t nextjs-docker .
4. Ejecuta tu contenedor: docker run -p 3000:3000 nextjs-docker

Si necesitas usar diferentes Variables de Entorno en múltiples entornos, revisa nuestro ejemplo with-docker-multi-env.

Exportación HTML Estática

Si deseas hacer una exportación HTML estática de tu aplicación Next.js, sigue las instrucciones en nuestra documentación de Exportación HTML Estática.

Otros servicios

Los siguientes servicios soportan Next.js v12+. A continuación, encontrarás ejemplos o guías para desplegar Next.js en cada servicio.

Servidor gestionado

• AWS Copilot
• Digital Ocean App Platform
• Google Cloud Run
• Heroku
• Railway
• Render

Nota importante: También hay plataformas gestionadas que te permiten usar un Dockerfile como se muestra en el ejemplo anterior.

Solo estático

Los siguientes servicios solo soportan desplegar Next.js usando output: 'export'.

• GitHub Pages

También puedes desplegar manualmente la salida de output: 'export' en cualquier proveedor de alojamiento estático, generalmente a través de tu pipeline de CI/CD como GitHub Actions, Jenkins, AWS CodeBuild, Circle CI, Azure Pipelines, y más.

Serverless

• AWS Amplify
• Azure Static Web Apps
• Cloudflare Pages
• Firebase
• Netlify
• Terraform
• SST

Nota importante: No todos los proveedores serverless implementan la API de compilación de Next.js desde next start. Por favor, verifica con el proveedor qué características están soportadas.

Actualizaciones automáticas

Cuando despliegas tu aplicación Next.js, quieres ver la última versión sin necesidad de recargar.

Next.js cargará automáticamente la última versión de tu aplicación en segundo plano al navegar. Para navegaciones del lado del cliente, next/link funcionará temporalmente como una etiqueta <a> normal.

Nota importante: Si una página nueva (con una versión antigua) ya ha sido precargada por next/link, Next.js usará la versión antigua. Navegar a una página que no ha sido precargada (y no está cacheada a nivel de CDN) cargará la última versión.

Apagado manual controlado

Al autoalojar, es posible que desees ejecutar código cuando el servidor se apague con señales SIGTERM o SIGINT.

Puedes establecer la variable de entorno NEXT_MANUAL_SIG_HANDLE en true y luego registrar un manejador para esa señal dentro de tu archivo _document.js. Necesitarás registrar la variable de entorno directamente en el script package.json, no en el archivo .env.

Nota importante: El manejo manual de señales no está disponible en next dev.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "NEXT_MANUAL_SIG_HANDLE=true next start"
  }
}

if (process.env.NEXT_MANUAL_SIG_HANDLE) {
  // esto debe añadirse en tu _document personalizado
  process.on('SIGTERM', () => {
    console.log('Received SIGTERM: ', 'cleaning up')
    process.exit(0)
  })

  process.on('SIGINT', () => {
    console.log('Received SIGINT: ', 'cleaning up')
    process.exit(0)
  })
}