exportPathMap

This feature is exclusive to next export. Please refer to Static HTML export if you want to learn more about it.

Examples

• Static Export

exportPathMapallows you to specify a mapping of request paths to page destinations, to be used during export. Paths defined in exportPathMapwill also be available when using next dev .

Let's start with an example, to create a custom exportPathMapfor an app with the following pages:

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

Open next.config.jsand add the following exportPathMapconfig:

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

Note: the queryfield in exportPathMapcannot be used with automatically statically optimized pages or getStaticProps pages as they are rendered to HTML files at build-time and additional query information cannot be provided during next export.

The pages will then be exported as HTML files, for example, /aboutwill become /about.html.

exportPathMapis an asyncfunction that receives 2 arguments: the first one is defaultPathMap, which is the default map used by Next.js. The second argument is an object with:

• dev- truewhen exportPathMapis being called in development. falsewhen running next export. In development exportPathMapis used to define routes.
• dir- Absolute path to the project directory
• outDir- Absolute path to the out/directory ( configurable with -o ). When devis truethe value of outDirwill be null.
• distDir- Absolute path to the .next/directory (configurable with the distDir config)
• buildId- The generated build id

The returned object is a map of pages where the keyis the pathnameand the valueis an object that accepts the following fields:

• page: String- the page inside the pagesdirectory to render
• query: Object- the queryobject passed to getInitialPropswhen prerendering. Defaults to {}

The exported pathnamecan also be a filename (for example, /readme.md), but you may need to set the Content-Typeheader to text/htmlwhen serving its content if it is different than .html.

Adding a trailing slash

It is possible to configure Next.js to export pages as index.htmlfiles and require trailing slashes, /aboutbecomes /about/index.htmland is routable via /about/. This was the default behavior prior to Next.js 9.

To switch back and add a trailing slash, open next.config.jsand enable the trailingSlashconfig:

module.exports = {
  trailingSlash: true,
}

Customizing the output directory

next export will use outas the default output directory, you can customize this using the -oargument, like so:

next export -o outdir

Related

Introduction to next.config.jsLearn more about the configuration file used by Next.js. Static HTML ExportExport your Next.js app to static HTML.