exportPathMap (非推奨)

この機能はnext export専用で、現在はpagesのgetStaticPathsまたはappのgenerateStaticParamsを優先して非推奨となっています。

exportPathMapを使用すると、エクスポート時に使用するリクエストパスとページ宛先のマッピングを指定できます。exportPathMapで定義されたパスはnext dev使用時にも利用可能です。

以下のページを持つアプリケーションのカスタムexportPathMapを作成する例を見てみましょう:

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

next.config.jsを開き、以下の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' } },
    }
  },
}

補足: exportPathMapのqueryフィールドは、自動静的最適化ページやgetStaticPropsページでは使用できません。これらはビルド時にHTMLファイルとしてレンダリングされるため、next export時に追加のクエリ情報を提供できないからです。

ページはHTMLファイルとしてエクスポートされます。例えば、/aboutは/about.htmlになります。

exportPathMapは2つの引数を受け取るasync関数です。最初の引数はdefaultPathMapで、Next.jsが使用するデフォルトのマップです。2番目の引数は以下のプロパティを持つオブジェクトです:

• dev - 開発時にexportPathMapが呼び出される場合はtrue。next export実行時はfalse。開発時にはexportPathMapがルート定義に使用されます。
• dir - プロジェクトディレクトリの絶対パス
• outDir - out/ディレクトリの絶対パス（-oで設定可能）。devがtrueの場合、outDirの値はnullになります。
• distDir - .next/ディレクトリの絶対パス（distDir設定で変更可能）
• buildId - 生成されたビルドID

返されるオブジェクトはページのマップで、keyはpathname、valueは以下のフィールドを受け入れるオブジェクトです:

• page: String - レンダリングするpagesディレクトリ内のページ
• query: Object - プリレンダリング時にgetInitialPropsに渡されるqueryオブジェクト。デフォルトは{}

エクスポートされるpathnameはファイル名（例: /readme.md）にもできますが、コンテンツが.htmlと異なる場合は、Content-Typeヘッダーをtext/htmlに設定する必要があるかもしれません。

末尾スラッシュの追加

Next.jsを設定して、ページをindex.htmlファイルとしてエクスポートし、末尾スラッシュを要求することが可能です。これにより、/aboutは/about/index.htmlになり、/about/でルーティング可能になります。これはNext.js 9以前のデフォルトの動作でした。

末尾スラッシュを追加するには、next.config.jsを開き、trailingSlash設定を有効にします:

module.exports = {
  trailingSlash: true,
}

出力ディレクトリのカスタマイズ

next exportはデフォルトでoutを出力ディレクトリとして使用します。-o引数を使用して以下のようにカスタマイズできます:

next export -o outdir

警告: exportPathMapの使用は非推奨であり、pages内のgetStaticPathsによって上書きされます。これらを一緒に使用することは推奨しません。