コンテンツにスキップ

exportPathMap

これはレガシーAPIであり、推奨されなくなりました。後方互換性のために引き続きサポートされています。

この機能は next export 専用であり、現在は pagesgetStaticPaths または appgenerateStaticParams が推奨されるようになり非推奨となっています。

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

注意: exportPathMapquery フィールドは、ビルド時に HTML ファイルにレンダリングされ、next export 中に追加のクエリ情報を提供できない、自動静的最適化ページまたはgetStaticProps ページでは使用できません。

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

exportPathMapasync 関数で、2つの引数を受け取ります。最初の引数は Next.js が使用するデフォルトマップである defaultPathMap です。2番目の引数はオブジェクトで、以下のプロパティを持ちます。

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

返されるオブジェクトはページのマップで、keypathnamevalue は以下のフィールドを受け入れるオブジェクトです。

  • page: String - レンダリングする pages ディレクトリ内のページ
  • query: Object - 事前レンダリング時に getInitialProps に渡される query オブジェクト。デフォルトは {}

エクスポートされた pathname はファイル名(例: /readme.md)にすることもできますが、その内容の Content-Type ヘッダーが .html と異なる場合は、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 によって上書きされます。これらを一緒に使用することは推奨しません。