メモリ使用量

アプリケーションが成長し、機能が豊富になるにつれて、ローカル開発時や本番ビルド作成時により多くのリソースを要求する場合があります。

Next.jsにおけるメモリを最適化し、一般的なメモリ問題に対処するためのいくつかの戦略と手法を探ってみましょう。

依存関係の数を減らす

多数の依存関係を持つアプリケーションは、より多くのメモリを使用します。

Bundle Analyzerは、パフォーマンスとメモリ使用量を改善するために削除できる可能性のある、アプリケーション内の大きな依存関係を調査するのに役立ちます。

`experimental.webpackMemoryOptimizations`を試す

v15.0.0以降、`next.config.js`ファイルにexperimental.webpackMemoryOptimizations: trueを追加することで、Webpackの動作を変更し、最大メモリ使用量を削減しつつ、コンパイル時間をわずかに増加させる可能性があります。

ご存じでしたか: この機能は現在、より多くのプロジェクトで最初にテストするための実験的なものですが、リスクは低いと考えられています。

`--experimental-debug-memory-usage`付きで`next build`を実行する

14.2.0以降、next build --experimental-debug-memory-usageを実行することで、ビルド中にNext.jsがヒープ使用量やガベージコレクションの統計など、メモリ使用量に関する情報を継続的に出力するモードでビルドを実行できます。メモリ使用量が設定された制限に近づくと、ヒープスナップショットも自動的に取得されます。

ご存じでしたか: この機能は、カスタムWebpack設定を使用していない限り自動的に有効になるWebpackビルドワーカーオプションとは互換性がありません。

ヒーププロファイルを記録する

メモリの問題を調査するには、Node.jsからヒーププロファイルを記録し、Chrome DevToolsにロードして、メモリリークの潜在的な原因を特定できます。

ターミナルで、Next.jsビルドを開始する際に、--heap-profフラグをNode.jsに渡します。

node --heap-prof node_modules/next/dist/bin/next build

ビルドの終わりに、Node.jsによって.heapprofileファイルが作成されます。

Chrome DevToolsで、Memoryタブを開き、「Load Profile」ボタンをクリックしてファイルを視覚化できます。

next buildまたはnext devコマンドを実行する際に、コマンドの先頭にNODE_OPTIONS=--inspectを追加します。これにより、インスペクターエージェントがデフォルトポートで公開されます。ユーザーコードが開始する前に中断したい場合は、代わりに--inspect-brkを渡すことができます。プロセスが実行中に、Chrome DevToolsなどのツールを使用してデバッグポートに接続し、ヒープのスナップショットを記録および分析して、保持されているメモリを確認できます。

14.2.0以降、--experimental-debug-memory-usageフラグ付きでnext buildを実行することで、ヒープスナップショットをより簡単に取得できます。

このモードで実行中に、いつでもプロセスにSIGUSR2シグナルを送信すると、プロセスはヒープスナップショットを取得します。

ヒープスナップショットはNext.jsアプリケーションのプロジェクトルートに保存され、Chrome DevToolsなどの任意のヒープアナライザーでロードして、保持されているメモリを確認できます。このモードは、Webpackビルドワーカーとはまだ互換性がありません。

詳細については、ヒープスナップショットの記録と分析方法を参照してください。

Webpackビルドワーカー

Webpackビルドワーカーを使用すると、Webpackのコンパイルを別のNode.jsワーカー内で実行でき、これによりビルド時のアプリケーションのメモリ使用量が減少します。

このオプションは、v14.1.0以降で、アプリケーションにカスタムWebpack設定がない場合、デフォルトで有効になります。

古いバージョンのNext.jsを使用している場合、またはカスタムWebpack設定がある場合は、next.config.js内でexperimental.webpackBuildWorker: trueを設定することでこのオプションを有効にできます。

ご存じでしたか: この機能は、すべてのカスタムWebpackプラグインと互換性がない場合があります。

Webpackキャッシュを無効にする

Webpackキャッシュは、生成されたWebpackモジュールをメモリやディスクに保存して、ビルド速度を向上させます。これはパフォーマンスに役立ちますが、キャッシュされたデータを保存するためにアプリケーションのメモリ使用量も増加させます。

この動作は、アプリケーションにカスタムWebpack設定を追加することで無効にできます。

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    if (config.cache && !dev) {
      config.cache = Object.freeze({
        type: 'memory',
      })
    }
    // Important: return the modified config
    return config
  },
}
 
export default nextConfig

静的解析を無効にする

型チェックとリンティングは、特に大規模なプロジェクトで多くのメモリを必要とする場合があります。しかし、ほとんどのプロジェクトにはこれらのタスクをすでに処理する専用のCIランナーがあります。「型のリントと有効性のチェック」ステップ中にビルドでメモリ不足の問題が発生する場合、ビルド中にこれらのタスクを無効にできます。

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
  },
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
}
 
export default nextConfig

これにより、型エラーやリンティングの問題によりデプロイが失敗する可能性があることに留意してください。静的解析が完了した後でのみ、ビルドを本番環境に昇格させることを強くお勧めします。Vercelにデプロイする場合、カスタムタスクが成功した後にビルドを本番環境に昇格させる方法については、ステージングデプロイメントのガイドを参照してください。

ソースマップを無効にする

ソースマップの生成は、ビルドプロセス中に追加のメモリを消費します。

productionBrowserSourceMaps: falseとexperimental.serverSourceMaps: falseをNext.js設定に追加することで、ソースマップの生成を無効にできます。

ご存じでしたか: 一部のプラグインはソースマップを有効にする場合があり、無効にするにはカスタム設定が必要になる場合があります。

Edgeでのメモリ問題

Next.js v14.1.3でEdgeランタイム使用時のメモリ問題が修正されました。問題を解決できるかを確認するために、このバージョン（またはそれ以降）にアップデートしてください。