コンテンツにスキップ
App Routerガイド開発環境

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

Next.jsは、優れた開発者体験を提供するために設計されています。アプリケーションが大きくなるにつれて、ローカル開発中のコンパイル時間が遅くなることに気づくかもしれません。このガイドでは、一般的なコンパイル時間パフォーマンスの問題を特定し、修正するのに役立ちます。

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

next devでの開発プロセスは、next buildおよびnext startとは異なります。

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

ローカル開発のパフォーマンスを改善する

1. コンピュータのウイルス対策を確認する

ウイルス対策ソフトウェアは、ファイルへのアクセスを遅くする可能性があります。これはWindowsマシンでより一般的ですが、ウイルス対策ツールがインストールされているどのシステムでも問題になる可能性があります。

Windowsでは、プロジェクトをMicrosoft Defender Antivirusの除外リストに追加できます。

  1. 「Windows セキュリティ」アプリケーションを開き、「ウイルスと脅威の保護」 → 「設定の管理」 → 「除外の追加または削除」を選択します。
  2. 「フォルダー」の除外を追加します。プロジェクトフォルダーを選択します。

macOSでは、ターミナル内でGatekeeperを無効にすることができます。

  1. ターミナルでsudo spctl developer-mode enable-terminalを実行します。
  2. 「システム設定」アプリを開き、「プライバシーとセキュリティ」 → 「開発者ツール」を選択します。
  3. ターミナルがリストに表示され、有効になっていることを確認します。iTermやGhosttyなどのサードパーティ製ターミナルを使用している場合は、それをリストに追加します。
  4. ターミナルを再起動します。
Screenshot of macOS System Settings showing the Privacy & Security pane
Screenshot of macOS System Settings showing the Developer Tools options

あなたまたはあなたの雇用主がシステムに他のウイルス対策ソリューションを構成している場合は、それらの製品の関連設定を確認してください。

2. Next.jsをアップデートしてTurbopackを使用する

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

Turbopackは現在Next.js開発のデフォルトのバンドラーであり、webpackよりも大幅なパフォーマンス向上のための機能を提供します。

npm install next@latest
npm run dev  # Turbopack is used by default

WebpackをTurbopackの代わりに引き続き使用する必要がある場合は、オプトインできます。

npm run dev --webpack

Turbopackの詳細はこちら。アップグレードガイドとcodemodsについては、アップグレードガイドを参照してください。

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

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

アイコンライブラリ

@material-ui/icons、@phosphor-icons/react、react-iconsなどのライブラリは、数千ものアイコンをインポートできますが、実際に数個しか使用しない場合でも同様です。必要なアイコンのみをインポートするようにしてください。

// Instead of this:
import { TriangleIcon } from '@phosphor-icons/react'
 
// Do this:
import { TriangleIcon } from '@phosphor-icons/react/dist/csr/Triangle'

使用しているアイコンライブラリのドキュメントで、適切なインポートパターンを見つけることができます。この例は、@phosphor-icons/reactの推奨事項に従っています。

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を使用している場合は、正しく設定されていることを確認してください。

よくある間違いは、content配列を、スキャンすべきでないnode_modulesやその他の大きなファイルディレクトリを含めるように構成することです。

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呼び出しのコストが削減されます。

実験的なオプションについてさらに学ぶ.

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デプロイメントについてさらに学ぶ。

問題発見のためのツール

詳細なfetchログ

next.config.jsファイルでlogging.fetchesオプションを使用して、開発中の状況に関する詳細情報を確認してください。

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

fetchログについてさらに学ぶ.

Turbopackトレース

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

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

  2. Turbopackトレースファイルを生成する

    NEXT_TURBOPACK_TRACING=1 npm run dev

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

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

  5. trace-turbopackという名前のファイルが.next/devフォルダーにあります。

  6. npx next internal trace [path-to-file]を使用してファイルを解釈できます。

    npx next internal trace .next/dev/trace-turbopack

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

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

  7. トレースサーバーが実行されたら、https://trace.nextjs.org/でトレースを表示できます。

  8. デフォルトでは、トレースビューアはタイミングを集計します。個々のタイミングを表示するには、ビューアの右上にある「集計順」から「スパン順」に切り替えることができます。

知っておくと便利：トレースファイルは、デフォルトで.next/devとなる開発サーバーディレクトリの下に配置されます。これは、Next構成ファイルでisolatedDevBuildフラグを使用して制御できます。

まだ問題がありますか？

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