🚀
【Next.js和訳】API Reference/next.config.js/exportPathMap
この記事について
この記事は、next.config.js/exportPathMap の記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
exportPathMap
Examples
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
オブジェクトです。デフォルトは{}
です。
トレーリングスラッシュの追加
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
関連
Discussion