🚀

【Next.js和訳】API Reference/next.config.js/exportPathMap

2021.10.03に公開

Next.js

tech

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、next.config.js/exportPathMap の記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

exportPathMap

この機能は、next export 専用です。詳しくは、Static HTML export をご覧ください。

Examples

Static Export

exportPathMapでは、エクスポート時に使用する、リクエストパスとページの宛先のマッピングを指定できます。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 の際に追加のクエリ情報を提供することができないからです。

例えば、/about は /about.html となります。

1 つ目の引数は、Next.js が使用するデフォルトのマップである、defaultPathMapです。2 つ目の引数は次のようなオブジェクトです。

dev - exportPathMap が開発中に呼ばれている場合は true。次のようになります。開発版では、exportPathMap`を使ってルートを定義します。
dir - プロジェクトディレクトリへの絶対パス
outDir - out/ ディレクトリへの絶対パス (configurable with -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の設定を有効にします。

module.exports = {
  trailingSlash: true,
}

出力ディレクトリのカスタマイズ

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

next export -o outdir