Next.js es el framework favorito para aplicaciones web modernas. Pero desplegarlo correctamente en producción puede ser un desafío, especialmente si venís de un mundo de SPAs estáticas o WordPress.

En POWA desplegamos Next.js a diario. Esta es nuestra guía práctica para que no sufras.

🧠 Next.js: No es solo frontend

La primera diferencia clave: Next.js es un servidor Node.js, no solo archivos estáticos.

Una SPA de React puede correr en un contenedor nginx con 32 MB de memoria. Una app Next.js (incluso con contenido mayormente estático) requiere un runtime Node.js que consume fácilmente 512 MB o más.

Eso no es bueno ni malo. Es distinto. Y tu estrategia de despliegue debe reflejarlo.

🔧 Desafío 1: Variables de entorno en tiempo de ejecución

En proyectos Node.js tradicionales, las variables de entorno se leen con process.env en el servidor. Pero en Next.js, el frontend en el navegador no tiene acceso a esas variables a menos que uses NEXT_PUBLIC_.

El problema: NEXT_PUBLIC_ se inyecta en el bundle durante el build. Esto hace que sea casi imposible tener una configuración en tiempo de ejecución sin reconstruir la app para cada entorno.

💡 Solución práctica

En POWA usamos este enfoque:

1. Construimos la app en modo standalone con next build
2. En el contenedor, ejecutamos con node server.js y pasamos variables de entorno
3. En el frontend, exponemos las variables necesarias via getInitialProps o getServerSideProps para que el servidor las inyecte en el HTML

🔍 Desafío 2: Logs útiles

El código de Next.js se minifica y optimiza, lo que hace que los logs en producción sean difíciles de leer.

💡 Solución práctica

• Usá next-logger o pino para logs estructurados
• Agregá contexto a tus logs (URL, userId, requestId)
• Usá source maps en producción para traducir stack traces a código legible

🐳 Desafío 3: Contenerización eficiente

Si usás Docker, optimizá el build:

FROM node:20-alpine AS builder
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
CMD ["node", "server.js"]

Esto puede reducir el tamaño de la imagen de 1GB a ~100-200MB.

🚀 Estrategias de despliegue

• Vercel: La opción más sencilla para proyectos simples. Gestiona builds, CDN, SSL y variables de entorno automáticamente.
• Kubernetes: Para proyectos empresariales que necesitan control total.

"La mayoría de los pipelines modernos asumen que construís una imagen una vez y la reutilizás en múltiples entornos. En Next.js, esto es difícil sin reconstruir para cada entorno."

¿Querés que te ayudemos a desplegar tu Next.js como un profesional? Agendá una consultoría →