ローカル開発

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

一般的な間違いは、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コールのコストが削減されます。

実験的オプションについて詳しくはこちら。

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

詳細なフェッチログ

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

next dev --verbose

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 [path-to-file]を使用してファイルを解釈できます：

   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で共有してください。