Exportación estática

Next.js permite comenzar como un sitio estático o una Aplicación de Página Única (SPA), y luego actualizar opcionalmente para usar funciones que requieran un servidor.

Al ejecutar next build, Next.js genera un archivo HTML por ruta. Al dividir una SPA estricta en archivos HTML individuales, Next.js puede evitar cargar código JavaScript innecesario en el lado del cliente, reduciendo el tamaño del paquete y permitiendo cargas de página más rápidas.

Dado que Next.js admite esta exportación estática, puede implementarse y alojarse en cualquier servidor web que pueda servir recursos estáticos HTML/CSS/JS.

Es bueno saberlo: Recomendamos usar el Enrutador de App para un mejor soporte de exportación estática.

Configuración

Para habilitar una exportación estática, cambia el modo de salida en next.config.js:

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

  // Opcional: Cambiar enlaces `/me` -> `/me/` y emitir `/me.html` -> `/me/index.html`
  // trailingSlash: true,

  // Opcional: Evitar la conversión automática `/me` -> `/me/`, preservando `href`
  // skipTrailingSlashRedirect: true,

  // Opcional: Cambiar el directorio de salida `out` -> `dist`
  // distDir: 'dist',
}

module.exports = nextConfig

Después de ejecutar next build, Next.js producirá una carpeta out que contiene los recursos HTML/CSS/JS para tu aplicación.

Puedes utilizar getStaticProps y getStaticPaths para generar un archivo HTML por cada página en tu directorio pages (o más para rutas dinámicas).

Funciones admitidas

La mayoría de las funciones principales de Next.js necesarias para construir un sitio estático son compatibles, incluyendo:

• Rutas dinámicas con getStaticPaths
• Prefetch con next/link
• Precarga de JavaScript
• Importaciones dinámicas
• Cualquier opción de estilos (ej. CSS Modules, styled-jsx)
• Obtención de datos en el cliente
• getStaticProps
• getStaticPaths

Optimización de imágenes

La Optimización de imágenes a través de next/image puede usarse con una exportación estática definiendo un cargador personalizado en next.config.js. Por ejemplo, puedes optimizar imágenes con un servicio como Cloudinary:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    loader: 'custom',
    loaderFile: './my-loader.ts',
  },
}

module.exports = nextConfig

Este cargador personalizado definirá cómo obtener imágenes desde una fuente remota. Por ejemplo, el siguiente cargador construirá la URL para Cloudinary:

export default function cloudinaryLoader({
  src,
  width,
  quality,
}: {
  src: string
  width: number
  quality?: number
}) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(
    ','
  )}${src}`
}

export default function cloudinaryLoader({ src, width, quality }) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(
    ','
  )}${src}`
}

Luego puedes usar next/image en tu aplicación, definiendo rutas relativas a la imagen en Cloudinary:

import Image from 'next/image'

export default function Page() {
  return <Image alt="tortugas" src="/tortugas.jpg" width={300} height={300} />
}

import Image from 'next/image'

export default function Page() {
  return <Image alt="tortugas" src="/tortugas.jpg" width={300} height={300} />
}

Funciones no admitidas

Las funciones que requieren un servidor Node.js, o lógica dinámica que no puede calcularse durante el proceso de compilación, no son compatibles:

• Enrutamiento internacionalizado
• Rutas API
• Rewrites
• Redirects
• Headers
• Middleware
• Regeneración estática incremental
• Optimización de imágenes con el loader predeterminado
• Modo borrador
• getStaticPaths con fallback: true
• getStaticPaths con fallback: 'blocking'
• getServerSideProps

Implementación

Con una exportación estática, Next.js puede implementarse y alojarse en cualquier servidor web que pueda servir recursos estáticos HTML/CSS/JS.

Al ejecutar next build, Next.js genera la exportación estática en la carpeta out. Ya no es necesario usar next export. Por ejemplo, supongamos que tienes las siguientes rutas:

• /
• /blog/[id]

Después de ejecutar next build, Next.js generará los siguientes archivos:

• /out/index.html
• /out/404.html
• /out/blog/post-1.html
• /out/blog/post-2.html

Si estás usando un host estático como Nginx, puedes configurar reescrituras de las solicitudes entrantes a los archivos correctos:

server {
  listen 80;
  server_name acme.com;

  root /var/www/out;

  location / {
      try_files $uri $uri.html $uri/ =404;
  }

  # Esto es necesario cuando `trailingSlash: false`.
  # Puedes omitirlo cuando `trailingSlash: true`.
  location /blog/ {
      rewrite ^/blog/(.*)$ /blog/$1.html break;
  }

  error_page 404 /404.html;
  location = /404.html {
      internal;
  }
}

Historial de versiones