exportPathMap

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

exportPathMap te permite especificar un mapeo de rutas de solicitud a destinos de página, para ser utilizado 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 añade 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 que usa 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 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 a renderizar
• query: Object - el objeto query pasado a getInitialProps durante la prerenderización. Por defecto es {}

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

Añadiendo 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 es enrutable mediante /about/. Este era el comportamiento predeterminado antes de Next.js 9.

Para volver a este comportamiento y añadir una barra diagonal final, abre next.config.js y habilita la configuració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.