Export estático de Next.js: despliega out/ en segundos

Q: ¿Funciona mi página 404 de Next.js?

Sí. next build escribe 404.html a partir de tu página not-found (App Router) o pages/404 (Pages Router), y Lobsite la sirve para cualquier dirección que no exista.

Next.js puede construir un sitio que no necesita servidor: activa output: "export" y next build escribe cada página como HTML en out/. Lobsite aloja esa carpeta. Ejecuta npm run build, luego npx lobsite, y el sitio estará publicado en una dirección *.lobsite.app con HTTPS. Para que quede claro desde el principio: esta página trata de exports estáticos. El renderizado en servidor, las rutas de API y el middleware necesitan un hosting con Node.js, como Vercel.

Cómo funciona

Activa el export estático en next.config.js con output: "export" (ver abajo) y ejecuta npm run build. El sitio queda en out/.
Ejecuta npx lobsite en el proyecto. Despliega out/, no public/ ni .next/. El primer deploy no necesita cuenta y dura 6 horas.
Consérvalo con el enlace para reclamarlo, en una cuenta gratuita. Después, cada npm run build && npx lobsite actualiza la misma dirección.

next.config.js para un export estático

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  images: { unoptimized: true },
};

module.exports = nextConfig;

output: "export" hace que next build escriba out/. El antiguo comando next export desapareció en Next.js 14; este ajuste lo sustituye.
images: { unoptimized: true } es necesario si usas next/image: el loader por defecto redimensiona las imágenes en un servidor en cada petición. Con él, las imágenes se sirven tal cual; redimensiónalas antes del build o usa un loader propio.
trailingSlash puede quedarse desactivado. Las páginas se escriben como about.html y Lobsite las sirve en /about.

Lo que un export estático no puede hacer

La documentación de Next.js enumera las funciones que necesitan un servidor. Las que más se encuentran:

Rutas de API y Route Handlers que no sean GET estáticos. Envía los formularios a /_lobsite/forms/contact; consulta formularios.
redirects, rewrites y headers en next.config. Mueve las redirecciones y cabeceras a lobsite.toml, donde se aplican a cada petición; el Generador de redirecciones escribe las reglas.
Middleware, Server Actions, ISR y cookies() o headers() en las páginas.
Rutas dinámicas sin generateStaticParams: cada página tiene que conocerse en el build.

Si tu app depende de esto, no es un sitio estático, y un hosting que ejecute Next.js en un servidor es la opción correcta.

Solo se suben los archivos modificados

Los archivos se guardan por su hash. Volver a desplegar un sitio sin cambios sube 0 bytes.

Cada deploy tiene su URL

Previsualiza antes de publicar. Vuelve atrás con un clic, redirecciones incluidas.

HTTPS en todas partes

Cada sitio recibe una dirección *.lobsite.app con HTTPS desde el primer deploy.

Formularios que simplemente funcionan

Apunta un formulario a /_lobsite/forms/contact. Filtro de spam incluido.

Configuración en un solo archivo

Las redirecciones, cabeceras y formularios están en lobsite.toml y viajan con cada deploy.

Límites que puedes leer

Todos los límites están publicados y cada error te dice qué hacer a continuación.

Comparativa de hostings para Next.js

	Lobsite	Vercel	Netlify	GitHub Pages
Export estático (`output: "export"`)	Sí	Sí	Sí	Sí
Renderizado en servidor, rutas de API, middleware	No	Sí	Sí	No
Build en el servidor	No: despliegas `out/`	Sí	Sí	En GitHub Actions
Cuenta antes del primer deploy	No: publicado 6 horas, luego consérvalo gratis	Sí	Sí	Sí, y un repositorio
Formularios sin backend	Sí, cuando el sitio está en una cuenta	No	Sí	No
Dominio propio	Sí, gratis	Sí	Sí	Sí

Vercel hace Next.js y lo ejecuta todo. Para una web corporativa, un blog o una documentación construidos como export estático, Lobsite es el hosting más sencillo: un comando, solo se suben los archivos cambiados y una URL de vista previa por deploy.

Preguntas frecuentes

¿Puedo alojar aquí una app de Next.js con renderizado en servidor?

No. Lobsite sirve archivos, así que solo funciona un export estático. Si las páginas usan getServerSideProps, Server Actions o renderizado dinámico, alójala donde Next.js se ejecute en un servidor.

¿Por qué se rompen mis imágenes de next/image tras el export?

El loader de imágenes por defecto necesita un servidor. Añade images: { unoptimized: true } a next.config.js o define un loader propio que apunte a un CDN de imágenes, y vuelve a compilar.

¿Funciona mi página 404 de Next.js?

Sí. next build escribe 404.html a partir de tu página not-found (App Router) o pages/404 (Pages Router), y Lobsite la sirve para cualquier dirección que no exista.

¿Puedo usar el App Router con un export estático?

Sí. Los Server Components se renderizan en el build; los componentes de cliente se ejecutan en el navegador como siempre. Solo quedan fuera las funciones que necesitan una petición en tiempo de ejecución.

Hosting para export estático de Next.js