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関数です。最初の引数は、Next.jsによって使用されるデフォルトマップであるdefaultPathMapです。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によって上書きされます。両方を一緒に使用することはお勧めしません。