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フィールドは、ビルド時に HTML ファイルにレンダリングされ、next export中に追加のクエリ情報を提供できない、自動静的最適化ページまたはgetStaticPropsページでは使用できません。
ページは HTML ファイルとしてエクスポートされます。たとえば、/about は /about.html になります。
exportPathMap は async 関数で、2つの引数を受け取ります。最初の引数は 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)にすることもできますが、その内容のContent-Typeヘッダーが.htmlと異なる場合は、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によって上書きされます。これらを一緒に使用することは推奨しません。
役に立ちましたか?