Cómo desplegar Next.js en Saplo

Next.js es hoy la elección por defecto si estás creando una página o aplicación en React que necesita cargar rápido y posicionarse bien en los resultados de búsqueda. El renderizado del lado del servidor y el App Router marcan una diferencia que una aplicación SPA clásica, compuesta solo por un build estático, no puede igualar. El problema es que una aplicación así necesita un proceso de Node.js funcionando en segundo plano, no solo un directorio con archivos HTML, por lo que su implementación en un hosting compartido normal suele fallar. En Saplo, instalas Next.js como cualquier otra aplicación del catálogo, y Saplo lo inicia inmediatamente como un servicio gestionado con reinicio automático. A continuación, te mostramos cómo hacerlo desde cero, incluyendo la conexión de tu propio repositorio Git.

Para quién es Next.js en Saplo

Antes de comenzar la instalación, verifica si es una buena opción para tu proyecto:

• tienes o estás construyendo un proyecto en Next.js con App Router - Saplo detecta la estructura del proyecto y ejecuta next start como un servicio, no necesitas escribir tu propia configuración de pm2 o systemd,
• necesitas SSR o ISR, no solo una compilación estática - si tu sitio es completamente estático, la pila React o Astro del mismo Catálogo de aplicaciones será más barata y ligera,
• quieres implementaciones con git push en lugar de subir archivos manualmente - conectas el repositorio una vez, y cada push a la rama de producción construye e implementa una nueva versión automáticamente,
• tu factura de hosting de un proyecto que actualmente está en Vercel o Netlify está creciendo - migras el código uno a uno, next.config.* permanece sin cambios, pagas por el Box en lugar de por el consumo de funciones.

Si tu proyecto es un frontend puro sin necesidad de renderizado del lado del servidor, consulta la pila React o Astro en el Catálogo de aplicaciones; ambas son más ligeras y económicas de mantener.

Requisitos

Para instalar Next.js en Saplo, necesitas:

• Un Box en el plan L o superior. Saplo recomienda oficialmente este nivel para Next.js, ya que el renderizado del lado del servidor requiere más RAM que una página estática normal. Los planes inferiores solo son suficientes para un tráfico de prueba muy pequeño.
• Un mínimo de 512 MB de RAM libre y 2 GB de espacio en disco solo para el proceso de la aplicación.
• Un Dominio o subdominio *.saploapp.pl incluido en el precio de cada plan, donde se alojará la aplicación.
• Un repositorio Git en GitHub, GitLab o Bitbucket, si deseas utilizar la implementación automática (opcional para empezar, también puedes subir la aplicación como un archivo .zip a través del panel).
• Por lo general, NO necesitas una base de datos separada, a menos que tu aplicación se conecte a una. Saplo no te lo impone.

Instalación paso a paso

1. En el panel de Saplo, ve a Catálogo de aplicaciones y selecciona Next.js (categoría "Frameworks").
2. Indica un Box en el plan L o superior y el nombre de la aplicación. Se creará un subdominio por defecto a partir de él <name>.saploapp.pl, puedes añadir tu propio dominio ahora o más tarde.
3. Confirma la instalación. El motor provisiona el módulo en el Box y ejecuta el boilerplate inicial de Next.js (equivalente a create-next-app) para que puedas ver algo bajo el dominio inmediatamente, antes de implementar tu propio código.
4. Saplo ejecuta la aplicación como un servicio gestionado con reinicio automático, y nginx en el Box dirige el tráfico del dominio al puerto del proceso de Next.js.
5. Una vez finalizada la instalación, el dominio del paso 2 mostrará una página de inicio funcional. A partir de ese momento, puedes implementar tu propio proyecto en ella.

Despliega tu propio código con Git

1. En los detalles de la aplicación, busca la sección Git / CI-CD y haz clic en "Conectar GitHub". Confirma la instalación de la aplicación "Saplo Deploy" en tu cuenta u organización e indica el repositorio con el proyecto Next.js.
2. El archivo saplo.yaml debe estar en el directorio raíz del repositorio. Puedes generarlo con el comando saplo init o escribirlo manualmente (ejemplo a continuación).
3. Haz commit y push del archivo saplo.yaml a la rama de producción (por defecto main, puedes cambiarla en la sección branches.production del mismo archivo).
4. Cada git push subsiguiente a esta rama activa una compilación y un despliegue automáticos. Puedes ver el estado en el panel, en la pestaña Despliegues, y también como un indicador verde o rojo junto al commit en GitHub.
5. Si la compilación o el chequeo de estado falla, la versión anterior y funcional de la aplicación permanece, Saplo no la reemplaza por una rota.

Ejemplo de un archivo saplo.yaml mínimo para Next.js:

name: my-project
stack: nextjs
runtime:
  node: "22"
build:
  install: npm ci
  command: npm run build
start:
  command: npm start
  port: 3000

El push de este archivo se ve igual que cualquier otro commit:

git add saplo.yaml
git commit -m "add saplo.yaml"
git push origin main

Next.js en Saplo vs. alternativas

Preguntas frecuentes

¿Tengo que configurar Git de inmediato o puedo empezar sin él? Puedes empezar sin Git. La instalación desde el catálogo de aplicaciones crea un esqueleto funcional de Next.js, y la primera implementación de tu propio código se puede hacer subiendo un archivo .zip en el panel. Puedes configurar Git en cualquier momento posterior.

¿Por qué se recomienda el Box L y no un plan inferior? Porque el renderizado del lado del servidor (SSR) mantiene el proceso de Node.js constantemente en la memoria y responde a cada solicitud de nuevo, a diferencia de una página estática, que una vez construida, reside en el disco. Los planes inferiores son suficientes para pruebas, pero bajo un tráfico de producción real, les faltará suficiente RAM.

¿Qué sucede si el repositorio no tiene el archivo saplo.yaml? En la primera implementación sin este archivo, el despliegue terminará con un error. En las siguientes, si el archivo desaparece de un commit específico, Saplo utilizará la configuración de la última implementación exitosa.

¿Tengo que configurar el puerto de la aplicación manualmente? No es necesario, el puerto predeterminado es 3000 y la mayoría de los proyectos Next.js no requieren cambiarlo. Si tu aplicación lo cambia, configúralo en la sección start.port del archivo saplo.yaml.

¿Puedo tener varias aplicaciones Next.js juntas en un mismo Box? Sí, el catálogo de aplicaciones permite instalar varios módulos en un Box, cada uno con su propio subdominio o dominio, siempre que haya suficiente RAM y espacio en disco asignado al plan.

Con Saplo, puedes configurar Next.js desde cero hasta un dominio funcional en cuestión de minutos, y cada git push posterior implementa una nueva versión sin tu intervención. Si estás migrando un proyecto existente de Vercel o Netlify y algo no funciona como debería, escríbenos, te ayudaremos a elegir la configuración en saplo.yaml.