︙

exportPathMap

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

例

Static Export

exportPathMapは、request paths をページの目的地にマッピングすることを指定でき、export の間に使用されます。Paths は、 next devを使用するときにもexportPathMapで定義されるものと同じく利用可能です。

例から始めましょう、カスタム exportPathMap を作成するための以下のページを持つ app：

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

next.config.jsを開き、次のexportPathMap config を追加してください：

next.config.js

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' } },
    }
  },
}

Good to know: exportPathMapのqueryフィールドは、自動的に静的に最適化されたページやgetStaticPropsページと一緒に使用することはできません。これらは build 時に HTML ファイルにレンダリングされ、追加の query 情報はnext export中に提供できません。

その後、ページは例えば、/about が /about.html になるように、HTML ファイルとして export されます。

exportPathMapはasync関数で、2 つの引数を受け取ります。最初の引数はdefaultPathMapで、これは Next.js が使用する default マップです。2 つ目の引数は以下の要素を持つ object です:

dev - exportPathMapが development で呼び出されているときはtrue。next exportを実行しているときはfalse。 development では、exportPathMapは routes を定義するために使用されます。
dir - プロジェクトディレクトリへの絶対的な path
outDir - out/ ディレクトリへの絶対 path(-oで設定可能)。 devがtrueの場合、outDirの value はnullになります。
distDir - .next/ ディレクトリへの絶対 path(distDir config で設定可能)
buildId - 生成された build id

返される object は、keyがpathnameで、valueが以下のフィールドを受け入れる object であるページの map です。

page: String - pages ディレクトリ内のページを render します
query: Object - getInitialPropsにプレ rendering 時に渡されるquery object 。default は{}です。

export された pathname はファイ lename(例えば、/readme.md)も可能ですが、内容がそれが .html と異なる場合、その内容を提供する際に Content-Type header を text/html に設定する必要があるかもしれません

。

Adding a trailing slash

index.htmlファイルとしてページをエクスポートするように Next.js を設定することが可能であり、/aboutが/about/index.htmlになり、/about/を介してルーティング可能になります。これは Next.js 9 より前の default の動作でした。

元に戻してトレーリングスラッシュを追加するには、next.config.js を開き、trailingSlash config を有効にします。

next.config.js

module.exports = {
  trailingSlash: true,
}

Customizing the output directory

next exportは、default の出力ディレクトリとしてoutを使用します。これは -o 引数を使ってカスタマイズすることができます。例えば、以下のようになります：

Terminal

next export -o outdir

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