exportPathMap
この機能は
next export専用であり、現在はpagesのgetStaticPathsまたはappのgenerateStaticParamsを優先して非推奨となっています。
例
exportPathMap を使用すると、エクスポート時に使用するリクエストパスとページ宛先のマッピングを指定できます。exportPathMap で定義されたパスは next dev 使用時にも利用可能です。
以下のページを持つアプリケーションのカスタム exportPathMap を作成する例を見てみましょう:
pages/index.jspages/about.jspages/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によって上書きされます。これらを一緒に使用することは推奨しません。