コンテンツへスキップ
アプリケーションの構築最適化ローカル開発

ローカル開発

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 の詳細については、アップグレードガイドおよびcodemods を参照してください。

3. インポートを確認する

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

アイコンライブラリ

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

// Instead of this:
import { Icon1, Icon2 } from 'react-icons/md'
 
// Do this:
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'],
  },
}

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}', // Good
    // This might be too broad
    // It will match `packages/**/node_modules` too
    // '../../packages/**/*.{js,ts,jsx,tsx}',
  ],
}

  2. 不要なファイルをスキャンしない

    module.exports = {
  content: [
    // Better - only scans the 'src' folder
    '../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
  ],
}

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

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

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

6. メモリ使用量を最適化する

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

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

7. Server Components とデータフェッチ

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

実験的な serverComponentsHmrCache オプションを使用すると、ローカル開発中の Hot Module Replacement (HMR) リフレッシュ間で Server Components の fetch レスポンスをキャッシュできます。これにより、レスポンスが高速化され、API 呼び出しの課金コストが削減されます。

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

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

詳細なフェッチログ

このコマンドを使用して、開発中に何が起きているかについて、より詳細な情報を確認してください。

next dev --verbose

まだ問題がありますか？

すべて試しても問題が解決しない場合

  1. 問題を再現できるアプリケーションのシンプルなバージョンを作成してください。

  2. 何が起きているかを示す特別なファイルを生成してください。

    NEXT_CPU_PROF=1 npm run dev

  3. このファイル（プロジェクトのメインフォルダにあります）と .next/trace ファイルを GitHub で新しいIssueとして共有してください。