Documentación

Deployment a Produccion

Vercel (recomendado)

Vercel es la plataforma de los creadores de NextJS. El deploy es automatico:

  1. Sube tu codigo a GitHub
  2. Conecta el repositorio en vercel.com
  3. Vercel detecta NextJS automaticamente y configura todo

Cada push a main genera un deploy a produccion. Cada PR genera un preview deployment.

Variables de entorno

En Vercel, ve a Settings → Environment Variables:

code
DATABASE_URL=postgresql://user:pass@host:5432/db
JWT_SECRET=tu-secreto-seguro
NEXT_PUBLIC_API_URL=https://api.miapp.com
NEXT_PUBLIC_

Las variables que empiezan con NEXT_PUBLIC_ se exponen al cliente. Nunca pongas secretos en variables NEXT_PUBLIC_.

Dominios

En Settings → Domains agrega tu dominio custom. Vercel configura HTTPS automaticamente.

Docker

Para deployear en cualquier plataforma (AWS, Railway, tu propio servidor):

dockerfile
# Dockerfile
FROM node:22-alpine AS base

# Instalar dependencias
FROM base AS deps
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci

# Build
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

# Produccion
FROM base AS runner
WORKDIR /app

ENV NODE_ENV=production

# Crear usuario no-root
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

# Copiar lo necesario
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000
ENV PORT=3000

CMD ["node", "server.js"]

Necesitas habilitar standalone output en next.config.ts:

ts
// next.config.ts
const nextConfig = {
  output: "standalone",
}

export default nextConfig
bash
# Build y correr
docker build -t mi-app .
docker run -p 3000:3000 mi-app

Docker con multi-stage

El Dockerfile de arriba usa multi-stage build:

  1. deps — Solo instala dependencias
  2. builder — Compila la app
  3. runner — Solo copia lo necesario para produccion

La imagen final pesa menos de 100MB comparado con 1GB+ sin multi-stage.

Static Export

Para sitios 100% estaticos (sin servidor):

ts
// next.config.ts
const nextConfig = {
  output: "export",
}

export default nextConfig
bash
npm run build
# Genera una carpeta 'out/' con HTML estatico

Limitaciones del static export:

  • No puedes usar Server Components con datos dinamicos
  • No puedes usar Route Handlers
  • No puedes usar middleware
  • No puedes usar ISR ni revalidacion

Sirve para landing pages, documentacion, portfolios.

Variables de entorno

En desarrollo

Crea un archivo .env.local (no se commitea):

bash
# .env.local
DATABASE_URL=postgresql://localhost:5432/miapp
JWT_SECRET=secreto-de-desarrollo
NEXT_PUBLIC_API_URL=http://localhost:3000/api

En produccion

Configura las variables en tu plataforma de hosting:

  • Vercel: Settings → Environment Variables
  • Docker: docker run -e DATABASE_URL=... mi-app
  • Railway/Render: Panel de variables de entorno

Acceder a variables

tsx
// Server Component o Route Handler (seguro)
const dbUrl = process.env.DATABASE_URL

// Client Component (solo NEXT_PUBLIC_)
const apiUrl = process.env.NEXT_PUBLIC_API_URL

Checklist de produccion

Antes de deployear, revisa esta lista:

  • Variables de entorno configuradas en produccion
  • sharp instalado para optimizacion de imagenes
  • Metadata y Open Graph configurados (ver Metadata)
  • robots.ts y sitemap.ts creados
  • Error handling con error.tsx en rutas criticas
  • Dominio y HTTPS configurados
  • Performance: imagenes optimizadas, fonts con next/font

Ejemplo: deploy a Vercel paso a paso

bash
# 1. Inicializar git si no lo tienes
git init
git add .
git commit -m "Initial commit"

# 2. Subir a GitHub
gh repo create mi-app --public --push

# 3. Instalar Vercel CLI (opcional, puedes usar la web)
npm i -g vercel

# 4. Deploy
vercel

# 5. Deploy a produccion
vercel --prod

Vercel te da una URL tipo mi-app.vercel.app. Despues agregas tu dominio custom.

AnteriorMiddlewareSiguienteTypeScript