【Next.js和訳】Advanced Features/Source Maps

この記事について

この記事は、Advanced Features/Source Mapsの記事を和訳したものです。

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

Source Maps

ソースマップとは、コンパイル前（元のコード）とコンパイル後の対応関係を記したファイル
開発環境の時には、ソースマップは、デフォルトで有効になっています。

ソースマップを生成すると、ビルド時間が大幅に長くなり、生成中のメモリ使用量も増えるため、プロダクションビルドでは無効になっています。

Next.js には、プロダクションビルド時にブラウザの ソースマップ生成を有効にするための設定フラグが用意されています。

next.config.js

module.exports = {
  productionBrowserSourceMaps: true,
}

productionBrowserSourceMapsオプションを有効にすると、ソースマップは JavaScript ファイルと同じディレクトリに出力されます。

Next.js はリクエストに応じてこれらのファイルを自動的に提供します。

警告 | Canveats

• ソースマップを追加すると、next buildにかかる時間が長くなる
• next build時のメモリ使用量が増加する