debug-perf

遅い、または過熱している Next.js アプリを診断します。開発環境と本番環境の両方で動作します。

手順

1. コンパイルループを確認する

ls -lh /tmp/*.log 2>/dev/null
# If any log is >100MB, a hot reload loop is running

開発サーバーの出力に、繰り返し発生するモジュール解決エラーがないか確認します。よくある原因は、Turbopack で geist/font/* のインポートが失敗することです。next/font/google に切り替えて修正します。

// layout.tsx — replace geist package imports
import { Geist, Geist_Mono } from "next/font/google";
const GeistSans = Geist({ subsets: ["latin"], variable: "--font-geist-sans" });
const GeistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" });

2. ファイル監視の範囲を確認する

実行時にプロジェクトのディレクトリ外のファイルを読み込んでいる場合：

// lib/something.ts
const ROOT = path.join(process.cwd(), ".."); // watches the parent dir

Turbopack は、実行時のファイル読み込みで参照されるすべてのディレクトリを監視します。.. 内のファイルを編集すると、全体が再コンパイルされます。修正方法：読み込み対象をプロジェクトのディレクトリ内に限定するか、適切な修正を計画する間、next.config.ts の turbopack: {} を使って警告を抑制します。

3. キャッシュされていないディスク読み込みを確認する

grep -rn "fs.readFileSync\|fs.readdirSync" lib/ app/ src/ 2>/dev/null

ファイルを読み込む関数がサーバーコンポーネントから呼び出されると、リクエストのたびに実行されます。モジュールレベルのキャッシュを追加します。

let cache: ReturnType<typeof loadData> | null = null;

export function loadData() {
  if (cache) return cache;
  // ... read files ...
  cache = result;
  return cache;
}

4. バンドルをプロファイリングする（本番環境）

npx @next/bundle-analyzer
# or add to next.config.ts:
# bundleAnalyzer: { enabled: process.env.ANALYZE === 'true' }

次の点を確認します。サーバーコンポーネントにできる大きなクライアントコンポーネント、チャンク間で重複しているパッケージ、クライアントバンドルに含めるべきでないパッケージ。

5. 負荷の高いサーバーコンポーネントを見つける

開発環境では、サーバーコンポーネントは cache() でラップされていない限り、リクエストのたびに再レンダリングされます。次を検索します。

grep -rn "await fetch\|readFileSync\|prisma\.\|supabase\." app/ --include="*.tsx" --include="*.ts"

import { cache } from 'react' でラップされていないサーバーコンポーネント内の負荷の高い呼び出しは、ページの読み込みのたびに実行されます。

6. 報告する

次の内容を記載します。

• 根本原因（ループ、ファイル監視、キャッシュされていない読み込み、バンドル）
• 変更したファイルと変更内容
• 修正後に想定される動作（アイドル時の CPU 使用率、ホットリロード時間）