Cómo crear una exportación estática de tu aplicación Next.js

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 activos estáticos HTML/CSS/JS.

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: Prevenir redirecció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 creará una carpeta out con los activos 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).

Características admitidas

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

• Rutas dinámicas al usar getStaticPaths
• Prefetching con next/link
• Precarga de JavaScript
• Importaciones dinámicas
• Cualquier opción de estilo (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}`
}

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="/turtles.jpg" width={300} height={300} />
}

Características no admitidas

Las características que requieren un servidor Node.js, o lógica dinámica que no puede computarse durante el proceso de construcció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 activos estáticos HTML/CSS/JS.

Al ejecutar next build, Next.js genera la exportación estática en la carpeta out. 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 desde 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 omitir esto cuando `trailingSlash: true`.
  location /blog/ {
      rewrite ^/blog/(.*)$ /blog/$1.html break;
  }

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

Historial de versiones