コンテンツにスキップ

exportPathMap (非推奨)

この機能はnext export専用であり、現在、pagesディレクトリを使用する場合はgetStaticPathsappディレクトリを使用する場合は`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' } },
    }
  },
}

**知っておくと良いこと**: `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 によってオーバーライドされます。 これらを一緒に使用することはお勧めしません。