🚀

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

2021/10/03に公開・約3,200字

Next.js

tech

この記事について

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

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

exportPathMap

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

例えば、/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