Desplegar una aplicación creada con Next.js en producción puede parecer complicado al principio, pero plataformas como Vercel simplifican considerablemente el proceso. Al estar diseñada por el mismo equipo que mantiene Next.js, Vercel ofrece integración directa con el framework, despliegues automáticos y configuración sencilla.
1. Prepara tu proyecto
Antes de desplegar, asegúrate de que tu aplicación funciona correctamente en local. Abre la terminal dentro del proyecto y ejecuta:
npm install
npm run dev
Después, abre http://localhost:3000 en el navegador y comprueba que todo funciona.
También es recomendable ejecutar una compilación de producción:
npm run build
Si no aparecen errores, el proyecto está listo para desplegarse.
2. Sube el proyecto a GitHub
Vercel puede conectarse directamente con un repositorio de GitHub. Si todavía no tienes uno, crea un repositorio nuevo y sube tu proyecto.
Desde la terminal puedes utilizar:
git init
git add .
git commit -m "Primer commit"
git branch -M main
git remote add origin URL_DEL_REPOSITORIO
git push -u origin main
Recuerda incluir un .gitignore para evitar subir carpetas innecesarias como node_modules.
3. Conecta GitHub con Vercel
Crea una cuenta en Vercel e inicia sesión utilizando GitHub. Desde el panel selecciona Add New Project y elige el repositorio donde se encuentra tu aplicación Next.js.
Vercel normalmente detectará automáticamente que se trata de un proyecto Next.js y configurará los comandos necesarios.
Revisa especialmente:
- Framework: Next.js
- Build Command:
next build - Install Command:
npm install - Output: configuración automática de Next.js
En la mayoría de proyectos no tendrás que modificar estos valores.
4. Configura las variables de entorno
Si tu aplicación utiliza bases de datos, APIs o servicios externos, probablemente tengas variables como:
DATABASE_URL=...
NEXT_PUBLIC_API_URL=...
En Vercel puedes agregarlas desde Project Settings → Environment Variables.
No subas archivos .env con contraseñas o claves privadas a GitHub.
5. Realiza el despliegue
Cuando todo esté configurado, pulsa Deploy. Vercel instalará las dependencias, ejecutará la compilación y publicará la aplicación.
Si el proceso termina correctamente, recibirás una URL pública similar a:
https://mi-aplicacion.vercel.app
Desde ese momento cualquier persona podrá acceder al proyecto.
6. Despliegues automáticos
Una de las principales ventajas es que los siguientes cambios pueden publicarse automáticamente. Cada vez que hagas un git push al repositorio conectado, Vercel puede iniciar un nuevo despliegue.
Esto permite trabajar de manera más profesional: desarrollas localmente, subes los cambios a GitHub y Vercel se encarga del proceso de publicación.
Desplegar Next.js en Vercel consiste básicamente en preparar el proyecto, subirlo a GitHub, conectar el repositorio con Vercel, configurar las variables de entorno y realizar el despliegue. Con esta integración puedes pasar de una aplicación funcionando en tu computador a una aplicación accesible desde Internet
