exportPathMap

Esta característica es exclusiva de next export y actualmente está obsoleta en favor de getStaticPaths con pages o generateStaticParams con app.

exportPathMap permite especificar un mapeo de rutas de solicitud a destinos de página, para ser usado durante la exportación. Las rutas definidas en exportPathMap también estarán disponibles al usar next dev.

Comencemos con un ejemplo, para crear un exportPathMap personalizado para una aplicación con las siguientes páginas:

• pages/index.js
• pages/about.js
• pages/post.js

Abre next.config.js y agrega la siguiente configuración de exportPathMap:

module.exports = {
  exportPathMap: async function (
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
      '/p/hello-nextjs': { page: '/post', query: { title: 'hello-nextjs' } },
      '/p/learn-nextjs': { page: '/post', query: { title: 'learn-nextjs' } },
      '/p/deploy-nextjs': { page: '/post', query: { title: 'deploy-nextjs' } },
    }
  },
}

Importante: el campo query en exportPathMap no puede usarse con páginas optimizadas estáticamente de forma automática o páginas con getStaticProps ya que se renderizan como archivos HTML en el momento de la construcción y no se puede proporcionar información adicional de consulta durante next export.

Las páginas se exportarán como archivos HTML, por ejemplo, /about se convertirá en /about.html.

exportPathMap es una función async que recibe 2 argumentos: el primero es defaultPathMap, que es el mapa predeterminado usado por Next.js. El segundo argumento es un objeto con:

• dev - true cuando exportPathMap se llama en desarrollo. false al ejecutar next export. En desarrollo, exportPathMap se usa para definir rutas.
• dir - Ruta absoluta al directorio del proyecto
• outDir - Ruta absoluta al directorio out/ (configurable con -o). Cuando dev es true, el valor de outDir será null.
• distDir - Ruta absoluta al directorio .next/ (configurable con la opción distDir)
• buildId - El ID de construcción generado

El objeto devuelto es un mapa de páginas donde la key es el pathname y el value es un objeto que acepta los siguientes campos:

• page: String - la página dentro del directorio pages para renderizar
• query: Object - el objeto query pasado a getInitialProps durante el prerenderizado. Por defecto es {}

El pathname exportado también puede ser un nombre de archivo (por ejemplo, /readme.md), pero puede ser necesario configurar el encabezado Content-Type como text/html al servir su contenido si es diferente a .html.

Agregar una barra diagonal final

Es posible configurar Next.js para exportar páginas como archivos index.html y requerir barras diagonales finales, /about se convierte en /about/index.html y se puede enrutar mediante /about/. Este era el comportamiento predeterminado antes de Next.js 9.

Para volver a esta configuración y agregar una barra diagonal final, abre next.config.js y habilita la opción trailingSlash:

module.exports = {
  trailingSlash: true,
}

Personalizando el directorio de salida

next export usará out como directorio de salida predeterminado, puedes personalizarlo usando el argumento -o, así:

next export -o outdir

Advertencia: Usar exportPathMap está obsoleto y es reemplazado por getStaticPaths dentro de pages. No recomendamos usarlos juntos.