Sebastian Gomez

Feb 21, 2022

Updated: Jun 24, 2026

Despliegue de aplicaciones Next.js con Vercel

Dependiendo de cómo hayas construido tu aplicación, podrás desplegarla en diferentes lugares. Por ejemplo, si tu aplicación está completamente generada como estática (SSG), puedes usar un servidor básico que solo sirva archivos estáticos, como Firebase Hosting o GitHub Pages. Para profundizar en SSG y los modos de renderizado en Next.js, consulta este post: Modos de renderizado en Next.js.

Vigente en Next.js 16: El concepto sigue intacto. Vercel es la compañía que creó Next.js, mantiene un plan gratuito (Hobby) muy generoso y el auto despliegue desde Git funciona tal como lo describimos aquí. Lo único que cambió desde 2022 es la herramienta de exportación estática: el viejo comando next export quedó obsoleto en Next.js 13.3 y se eliminó en Next.js 14, así que abajo verás el flujo actual.

Despliegue con servidores estáticos

Para generar una versión completamente estática de tu aplicación, ya no se usa el antiguo comando next export. Hoy la exportación estática se activa desde la configuración. Añade output: 'export' a tu next.config.js:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    // El optimizador de imágenes necesita un servidor, así que en la
    // exportación estática hay que desactivarlo para seguir usando next/image.
    unoptimized: true,
  },
};

module.exports = nextConfig;

Luego ejecuta el build normal:

next build

Next.js generará el sitio estático en la carpeta out/. Sube esa carpeta al servidor correspondiente o intégrala en tu propio pipeline de integración continua y despliegue.

Tip: La exportación estática tiene límites. Al no haber servidor, no puedes usar funciones dinámicas de servidor. Esto significa nada de export const dynamic = 'force-dynamic', nada de Route Handlers con lógica de servidor en tiempo de ejecución, y next/image requiere images.unoptimized: true (como ves arriba). Si tu aplicación depende de renderizado dinámico, mejor despliégala en una plataforma con servidor como Vercel.

La opción más sencilla: Vercel

La forma más sencilla de desplegar tu aplicación Next.js es utilizando Vercel, la compañía que literalmente creó Next.js. Además, ofrecen un plan gratuito muy cómodo para aplicaciones construidas con Next.js. Solo necesitas ejecutar un comando para desplegar tu aplicación.

Familiarízate con el sitio web de Vercel

Visita el sitio web de Vercel para descubrir funcionalidades interesantes y aprender cómo funciona su oferta gratuita, que, para ser gratis, es bastante generosa.

Instalación de Vercel

Primero, instala Vercel como paquete global de Node:

npm i -g vercel

Tip: Si no quieres instalar nada de forma global, puedes usar npx vercel y obtener exactamente el mismo resultado.

Despliegue con Vercel

Para desplegar tu aplicación con Vercel, simplemente ejecuta el siguiente comando en tu consola:

vercel

Luego, sigue las instrucciones que aparecen en pantalla.

También puedes configurar el despliegue desde tu repositorio de GitHub y vincular ambos servicios. Desde el dashboard de Vercel, elige Add New, Project, importa tu repositorio de GitHub y autoriza el acceso. A partir de ese momento, cada push a tu rama principal dispara un despliegue de producción automático, y cada Pull Request genera su propio Preview Deployment con una URL única para revisar los cambios antes de fusionarlos.

Conclusiones

• Existen diferentes opciones para desplegar aplicaciones Next.js, pero Vercel es la más sencilla y recomendada.
• Vercel, la compañía detrás de Next.js, ofrece un plan gratuito para desplegar aplicaciones construidas con Next.js.
• Desplegar una aplicación Next.js en Vercel es tan simple como ejecutar un comando y seguir las instrucciones.

Ejercicios propuestos

1. Despliega una aplicación Next.js simple como sitio estático (output: 'export' más next build) en Firebase Hosting o GitHub Pages.
2. Despliega la misma aplicación utilizando Vercel y compara la experiencia de despliegue entre ambas opciones.
3. Investiga y experimenta con la integración de Vercel y GitHub para automatizar el despliegue de tu aplicación Next.js cada vez que hagas un cambio en tu repositorio.

Resumen en 3 puntos

1. Hay diferentes opciones para desplegar aplicaciones Next.js, como servidores estáticos (Firebase Hosting, GitHub Pages, con output: 'export') y Vercel.
2. Vercel es la compañía creadora de Next.js y ofrece un plan gratuito y fácil de usar para desplegar aplicaciones Next.js.
3. Puedes desplegar tu aplicación Next.js en Vercel con solo ejecutar un comando, y también puedes automatizar el proceso vinculando tu repositorio de GitHub con Vercel.

Eso es todo, espero que este post te haya sido útil y lo puedas aplicar en algún proyecto que tengas en mente. Si te ha ayudado a entender cómo desplegar aplicaciones Next.js en Vercel, déjame un comentario a continuación. También, si tienes alguna opinión o duda, no dudes en comentar. Recuerda que si te gustó el artículo, puedes compartirlo en redes sociales usando los enlaces que se encuentran al final del post. Buena suerte con tus despliegues.