exportPathMap

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

以下のページを含むアプリのカスタム 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' } }
    };
  }
};

ページは HTML ファイルとしてエクスポートされ、例えば、 /about/about.html になります。

exportPathMap は 2 つの引数を受け取る async 関数(非同期関数)です: 第 1 引数は defaultPathMap で、これは Next.js で使うデフォルトマップです。第 2 引数は以下のプロパティを持つオブジェクトです:

  • dev - 開発中に exportPathMap が呼ばれているとき true になります。next export 実行中のとき false になります。開発時 exportPathMap はルートの定義に利用されます。
  • dir - プロジェクトディレクトリへの絶対パス
  • outDir - out/ ディレクトリへの絶対パス ( -o で設定可能)。devtrue のとき、 outDir の値は null になります。
  • distDir - .next/ ディレクトリへの絶対パス (distDir設定で設定可能)
  • buildId - ビルド ID を生成します

返り値となるオブジェクトは、 keypathnamevalue が以下のフィールドを受け入れるオブジェクトのページのマップです:

  • page: String - 描画する pages ディレクトリ内のページ
  • query: Object - プリレンダリングするとき getInitialPropsquery オブジェクトを渡します。デフォルトは {} です。

エクスポートされた pathname はファイル名にすることもできます (例:/readme.md)。しかし、それが .html と異なる場合、コンテンツを提供するとき、おそらく Content-Type ヘッダーを text/html にセットする必要があります。

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

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

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

module.exports = {
  exportTrailingSlash: true
};

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

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

next export -o outdir

関連事項