exportPathMap

この機能は next export に固有のものです。もし next export について詳しく学びたい場合は静的HTMLのエクスポートを参照してください。

例

• 静的エクスポート

exportPathMap によってエクスポート時に利用される HTTP リクエストのパスとページの宛先をマッピングを指定できます。 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 関数(非同期関数)です: 第 1 引数は 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 にセットする必要があります。

末尾にスラッシュを追加する

index.html ファイルとしてページをエクスポートするために Next.js を設定できます。末尾にスラッシュを要求し、 /about が /about/index.html になることで、 /about/ を経由してルーティング可能になります。これは Next.js 9 より前のデフォルトの動作でした。

末尾にスラッシュを追加するように切り替えるには、 next.config.js を開いて、 trailingSlash 設定を有効にします:

module.exports = {
  trailingSlash: true
};

出力するディレクトリをカスタマイズする

next export はデフォルトの出力先ディレクトリとして out を使います。-o 引数を使って、このようにカスタマイズできます:

next export -o outdir

関連事項