Menu

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

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

ローカル開発と本番環境

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

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

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

1. コンピューターのアンチウイルスをチェックする

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

Windowsでは、プロジェクトをMicrosoft Defenderアンチウイルス除外リストに追加できます。

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

macOSでは、ターミナルからGatekeeperを無効化できます。

  1. ターミナルでsudo spctl developer-mode enable-terminalを実行します。
  2. 「システム設定」アプリを開き、「プライバシーとセキュリティ」 → **「開発者ツール」**を選択します。
  3. ターミナルが一覧に表示され、有効になっていることを確認します。iTerm や Ghostty などのサードパーティーターミナルを使用している場合は、それをリストに追加します。
  4. ターミナルを再起動します。
macOSシステム設定のプライバシーとセキュリティペインを示すスクリーンショット
macOSシステム設定の開発者ツールオプションを示すスクリーンショット

ユーザーまたはユーザーの雇用者がシステムに他のアンチウイルスソリューションを設定している場合は、それらの製品の関連する設定を確認する必要があります。

2. Next.jsを更新し、Turbopackを使用する

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

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

npm install next@latest
npm run dev  # Turbopackはデフォルトで使用されます

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

npm run dev --webpack

Turbopackの詳細を学ぶ。詳細については、アップグレードガイドとコードモッドを参照してください。

3. インポートをチェックする

コードのインポート方法は、コンパイルおよびバンドル時間に大きく影響する可能性があります。パッケージバンドルの最適化について詳しく学び、Dependency CruiserやMadgeなどのツールを探索します。

アイコンライブラリ

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

// これではなく：
import { TriangleIcon } from '@phosphor-icons/react'
 
// これをしてください：
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}', // 良い
    // これは広すぎる可能性があります
    // `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. Server Componentsとデータ取得

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

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

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

8. Dockerではなくローカル開発を検討する

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

MacおよびWindowsでのDockerのファイルシステムアクセスにより、ホットモジュールリプレイスメント（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. 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. デフォルトでは、トレースビューアーはタイミングを集計します。個別のタイミングを表示するには、ビューアーの右上にある「Aggregated in order」から「Spans in order」に切り替えることができます。

補足：トレースファイルは開発サーバーディレクトリー（デフォルトは.next/dev）の下に配置されます。これは、Next configファイルのisolatedDevBuildフラグを使用して制御できます。

それでも問題がありますか？

Turbopackトレースセクションで生成されたトレースファイルを共有し、GitHubディスカッションまたはDiscordで共有します。