exportPathMap

Cette fonctionnalité est exclusive à next export et est actuellement dépréciée au profit de getStaticPaths avec pages ou generateStaticParams avec app.

exportPathMap vous permet de spécifier un mappage des chemins de requête vers les destinations de page, à utiliser lors de l'export. Les chemins définis dans exportPathMap seront également disponibles lors de l'utilisation de next dev.

Commençons par un exemple pour créer un exportPathMap personnalisé pour une application avec les pages suivantes :

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

Ouvrez next.config.js et ajoutez la configuration exportPathMap suivante :

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' } },
    }
  },
}

Bon à savoir : le champ query dans exportPathMap ne peut pas être utilisé avec les pages automatiquement optimisées statiquement ou les pages getStaticProps car elles sont rendues en fichiers HTML au moment de la construction et des informations de requête supplémentaires ne peuvent pas être fournies pendant next export.

Les pages seront ensuite exportées en tant que fichiers HTML, par exemple, /about deviendra /about.html.

exportPathMap est une fonction async qui reçoit 2 arguments : le premier est defaultPathMap, qui est la carte par défaut utilisée par Next.js. Le second est un objet avec :

• dev - true lorsque exportPathMap est appelé en développement. false lors de l'exécution de next export. En développement, exportPathMap est utilisé pour définir les routes.
• dir - Chemin absolu vers le répertoire du projet
• outDir - Chemin absolu vers le répertoire out/ (configurable avec -o). Lorsque dev est true, la valeur de outDir sera null.
• distDir - Chemin absolu vers le répertoire .next/ (configurable avec la configuration distDir)
• buildId - L'identifiant de construction généré

L'objet retourné est une carte de pages où la clé est le pathname et la valeur est un objet qui accepte les champs suivants :

• page: String - la page dans le répertoire pages à rendre
• query: Object - l'objet query passé à getInitialProps lors du prérendu. Par défaut {}

Le pathname exporté peut également être un nom de fichier (par exemple, /readme.md), mais vous devrez peut-être définir l'en-tête Content-Type sur text/html lors de la diffusion de son contenu s'il est différent de .html.

Ajout d'une barre oblique finale

Il est possible de configurer Next.js pour exporter les pages en tant que fichiers index.html et exiger des barres obliques finales, /about devient /about/index.html et est accessible via /about/. C'était le comportement par défaut avant Next.js 9.

Pour revenir à cette configuration et ajouter une barre oblique finale, ouvrez next.config.js et activez la configuration trailingSlash :

module.exports = {
  trailingSlash: true,
}

Personnalisation du répertoire de sortie

next export utilisera out comme répertoire de sortie par défaut, vous pouvez le personnaliser en utilisant l'argument -o, comme ceci :

next export -o outdir

Avertissement : L'utilisation de exportPathMap est dépréciée et est remplacée par getStaticPaths dans pages. Nous ne recommandons pas de les utiliser ensemble.