メインコンテンツまでスキップ

exportPathMap

この機能は next export に特有のもので、現在は pages での getStaticPaths か、app での generateStaticParams が推奨されており、非推奨 となっています。

exportPathMap は、エクスポート時に使用されるリクエストパスとページのマッピングを指定することができます。exportPathMap で定義されたパスは、next dev を使用する際にも使用可能です。

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

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

next.config.js を開いて、次のように exportPathMap の設定を追加します：

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 ページとは使用できません；これらはビルド時に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 設定を有効にします：

next.config.js
module.exports = {
  trailingSlash: true,
}

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

next export はデフォルトで out を出力ディレクトリとして使用しますが、次のように -o 引数を使用してカスタマイズできます：

ターミナル
next export -o outdir

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