Una exportación estática de Next.js es solo HTML, CSS y JavaScript. Ningún servidor se ejecuta, ninguna base de datos espera y el alojamiento es gratuito en Netlify. Si sus páginas no leen cookies por solicitud o mutan datos, haga esto. Es la victoria por rendimiento más barata que existe.

Activar exportación estática

En next.config.ts, configure la salida para exportar y desactive el optimizador de imágenes, que necesita un servidor en vivo:

const nextConfig: NextConfig = {
  output: "export",
  trailingSlash: true,
  images: { unoptimized: true },
};

Cualquier componente que utilice cookies, acciones del servidor o middleware ahora hará que la compilación falle, ruidosamente y en el momento de la compilación. Esa es la característica, no un error: aprendes qué es dinámico antes de la implementación, no después.

Dígale a Netlify dónde se encuentra el sitio

El complemento Next.js de Netlify detecta la salida: exporta por sí solo y copia la carpeta de salida. Su netlify.toml puede tener dos líneas:

[build]
  command = "npm run build"
  publish = "out"
  1. npm run build ejecuta la siguiente compilación, que escribe todo el sitio en archivos HTML.
  2. Netlify publica en su CDN global. Cada página es un archivo. Nada para empezar, nada para estrellarse.
  3. Agregue public/_headers para una mayor duración de la caché de imágenes, fuentes y paquetes.

Sepa a qué renuncias

  • No hay middleware ni reescrituras porque ya no existe ningún controlador de solicitudes.
  • No hay acciones del servidor ni controladores de ruta que lean la solicitud.
  • Las imágenes se envían tal cual, así que cambie su tamaño una vez en el momento de la compilación y envíelas WebP.
La estática no es una degradación. Es elegir que sus páginas existan antes de que aparezca un visitante.

Para cualquier cosa que la gente lea, la estática es muy buena: es rápida en todas partes, no cuesta nada y una implementación no puede interrumpir una página en ejecución. ¿Quiere conocer la receta completa para que los motores de búsqueda se den cuenta del nuevo sitio? Lo escribimos aquí mismo.