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関数です。最初の引数は、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によってオーバーライドされます。 これらを一緒に使用することはお勧めしません。
これは役に立ちましたか？