メインコンテンツまでスキップ

ローカル開発

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'],
  },
}

4. Tailwind CSSの設定を確認する​

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

一般的な間違いは、content配列をnode_modulesやスキャンすべきでない他の大きなディレクトリを含むように設定することです。

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に移行してloadersを使用することを検討してください。

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

アプリが非常に大きい場合、より多くのメモリが必要になるかもしれません。

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

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

Server Componentsへの変更は、ページ全体を再レンダリングし、新しいデータをコンポーネントに表示するためにローカルで再レンダリングを引き起こします。

実験的なserverComponentsHmrCacheオプションを使用すると、ローカル開発中のホットモジュールリプレースメント（HMR）リフレッシュ間でServer Components内のfetchレスポンスをキャッシュできます。これにより、応答が高速化され、課金されるAPIコールのコストが削減されます。

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

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

詳細なfetchログ​

開発中に何が起こっているのかをより詳細に知るために、このコマンドを使用してください：

next dev --verbose

まだ問題がありますか？​

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

  1. 問題を示すアプリの簡単なバージョンを作成します。

  2. 何が起こっているのかを示す特別なファイルを生成します：

    NEXT_CPU_PROF=1 npm run dev

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