ローカル開発環境を最適化する方法

Next.js は優れた開発者体験を提供するように設計されています。アプリケーションが成長するにつれて、ローカル開発中のコンパイル時間が遅くなることに気付くかもしれません。このガイドでは、コンパイル時のパフォーマンス問題を特定して修正する方法を説明します。

ローカル開発環境と本番環境の違い

next dev を使用した開発プロセスは、next build や next start とは異なります。

next dev は、アプリケーション内のルートを開いたりナビゲートしたりする際にコンパイルします。これにより、アプリケーション内のすべてのルートがコンパイルされるのを待たずに開発サーバーを起動でき、より高速でメモリ使用量も少なくなります。本番ビルドを実行すると、ファイルの最小化やコンテンツハッシュの作成など、ローカル開発では不要な最適化が適用されます。

ローカル開発のパフォーマンス向上

1. コンピュータのアンチウイルスを確認

アンチウイルスソフトウェアがファイルアクセスを遅くしている可能性があります。

プロジェクトフォルダをアンチウイルスの除外リストに追加してみてください。Windows マシンでより一般的ですが、アンチウイルスツールがインストールされているシステムではすべて推奨します。

2. Next.js を更新して Turbopack を有効化

最新バージョンの Next.js を使用していることを確認してください。新しいバージョンにはパフォーマンス改善が含まれていることがよくあります。

Turbopack は Next.js に統合された新しいバンドラーで、ローカルパフォーマンスを向上させることができます。

npm install next@latest
npm run dev --turbopack

Turbopack の詳細 や アップグレードガイド、コードモッドについてはこちらをご覧ください。

3. インポートを確認

コードのインポート方法はコンパイルやバンドル時間に大きく影響します。パッケージバンドリングの最適化 や Dependency Cruiser、Madge などのツールについて学びましょう。

アイコンライブラリ

@material-ui/icons や react-icons などのライブラリは、使用するアイコンが少数でも数千のアイコンをインポートする可能性があります。必要なアイコンのみをインポートするようにしてください:

// このようにする代わりに:
import { Icon1, Icon2 } from 'react-icons/md'

// このようにします:
import Icon1 from 'react-icons/md/Icon1'
import Icon2 from 'react-icons/md/Icon2'

react-icons のようなライブラリには多くの異なるアイコンセットが含まれています。1つのセットを選択し、そのセットに固執してください。

例えば、アプリケーションが react-icons を使用していて、以下のすべてをインポートしている場合:

• pi (Phosphor Icons)
• md (Material Design Icons)
• tb (tabler-icons)
• cg (cssgg)

これらを組み合わせると、各セットから1つのインポートしか使用していなくても、コンパイラが処理しなければならないモジュールは数万になります。

バレルファイル

「バレルファイル」とは、他のファイルから多くの項目をエクスポートするファイルです。コンパイラがモジュールスコープの副作用を見つけるために解析する必要があるため、ビルドが遅くなる可能性があります。

可能な場合は特定のファイルから直接インポートしてください。バレルファイルの詳細 と Next.js の組み込み最適化について学びましょう。

パッケージインポートの最適化

Next.js は特定のパッケージのインポートを自動的に最適化できます。バレルファイルを利用するパッケージを使用している場合は、next.config.js に追加してください:

module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
}

Turbopack はインポートを自動的に分析して最適化します。この設定は必要ありません。

4. Tailwind CSS の設定を確認

Tailwind CSS を使用している場合、正しく設定されていることを確認してください。

よくある間違いは、スキャンすべきでない node_modules や他の大きなファイルディレクトリを含む方法で content 配列を設定することです。

Tailwind CSS バージョン 3.4.8 以降では、ビルドを遅くする可能性のある設定について警告が表示されます。

1. tailwind.config.js でスキャンするファイルを具体的に指定します:

   module.exports = {
     content: [
       './src/**/*.{js,ts,jsx,tsx}', // 良い例
       // これは範囲が広すぎる可能性があります
       // `packages/**/node_modules` にもマッチします
       // '../../packages/**/*.{js,ts,jsx,tsx}',
     ],
   }

2. 不要なファイルのスキャンを避けます:

   module.exports = {
     content: [
       // より良い例 - 'src' フォルダのみをスキャン
       '../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
     ],
   }

5. カスタム webpack 設定を確認

カスタム webpack 設定を追加している場合、コンパイルを遅くしている可能性があります。

ローカル開発に本当に必要かどうかを検討してください。本番ビルドにのみ特定のツールを含めるか、Turbopack に移行して ローダー を使用することを検討してください。

6. メモリ使用量の最適化

アプリケーションが非常に大きい場合、より多くのメモリが必要になる可能性があります。

メモリ使用量の最適化について詳しく学ぶ。

7. サーバーコンポーネントとデータフェッチ

サーバーコンポーネントへの変更は、新しい変更を表示するためにローカルではページ全体を再レンダリングさせます。これにはコンポーネントの新しいデータのフェッチも含まれます。

実験的な serverComponentsHmrCache オプションを使用すると、ローカル開発中の Hot Module Replacement (HMR) 更新を跨いでサーバーコンポーネントの fetch レスポンスをキャッシュできます。これにより、より高速なレスポンスと課金対象の API 呼び出しのコスト削減が実現します。

実験的オプションについて詳しく学ぶ。

8. Docker よりもローカル開発を検討

Mac または Windows で Docker を使用して開発している場合、Next.js をローカルで実行するよりも大幅にパフォーマンスが低下する可能性があります。

Mac と Windows での Docker のファイルシステムアクセスにより、Hot Module Replacement (HMR) に数秒から数分かかる場合がありますが、同じアプリケーションをローカルで開発すると高速な HMR で実行されます。

このパフォーマンスの違いは、Docker が Linux 環境以外でファイルシステム操作を処理する方法によるものです。最適な開発体験を得るには:

• 開発中は Docker ではなくローカル開発 (npm run dev または pnpm dev) を使用する
• Docker は本番デプロイと本番ビルドのテストに限定する
• 開発に Docker を使用する必要がある場合は、Linux マシンまたは VM 上で Docker を使用することを検討する

本番使用のための Docker デプロイについて詳しく学ぶ。

問題を見つけるためのツール

詳細なフェッチログ

next.config.js ファイルの logging.fetches オプションを使用して、開発中に何が起こっているかについての詳細な情報を確認できます:

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
}

フェッチログについて詳しく学ぶ。

Turbopack トレーシング

Turbopack トレーシングは、ローカル開発中のアプリケーションパフォーマンスを理解するのに役立つツールです。 各モジュールのコンパイルにかかった時間とそれらの関係についての詳細な情報を提供します。

1. Next.js の最新バージョンがインストールされていることを確認します。

2. Turbopack トレースファイルを生成します:

   NEXT_TURBOPACK_TRACING=1 npm run dev

3. アプリケーション内を移動したりファイルを編集したりして問題を再現します。

4. Next.js 開発サーバーを停止します。

5. .next フォルダに trace-turbopack というファイルが作成されます。

6. next internal trace [ファイルパス] を使用してファイルを解釈できます:

   next internal trace .next/trace-turbopack

   trace が利用できないバージョンでは、コマンド名が turbo-trace-server でした:

   next internal turbo-trace-server .next/trace-turbopack

7. トレースサーバーが起動すると、https://trace.nextjs.org/ でトレースを表示できます。

8. デフォルトでは、トレースビューアはタイミングを集約します。個々の時間を確認するには、ビューアの右上にある「Aggregated in order」から「Spans in order」に切り替えます。

まだ問題が解決しない場合

Turbopack トレーシング セクションで生成されたトレースファイルを GitHub Discussions または Discord で共有してください。