Summary

Next.js 12 は大規模な性能・機能アップデートです。主な変更点は SWC ベースの Rust コンパイラによるビルド/開発速度の改善、Middleware（β）、React 18 と Server Components の実験サポート、ESM/URL インポート、AVIF 画像対応、Bot-aware ISR、出力ファイルトレースなどです。まずは npm i next@latest で更新してください。

Key Points

• Rust コンパイラ（SWC）でビルドと Fast Refresh が大幅高速化（ローカル約3x、プロダクション約5x）。既存のカスタム Babel 設定がある場合は自動的にオプトアウトされます。ミニファイはオプトイン: module.exports = { swcMinify: true }。
• Middleware（β）: リクエスト前にコードで制御（rewrite/redirect/headers/HTML ストリーミングなど）。pages/_middleware.js を作成し標準 Web API（fetch/Response 等）を利用。Edge 環境でも動作します。
• React 18 対応（実験）: Concurrent 機能、Suspense、SSR ストリーミングを試用可能。設定例: experimental: { concurrentFeatures: true }。Server Components を有効にするなら serverComponents: true を併用してください。
• ES Modules / URL Imports: ESM がデフォルトに。experimental.urlImports で CDN 等から直接 ES モジュールをインポート可能（next.lock とローカルキャッシュ生成）。クライアント・サーバー両方でサポート。
• AVIF 画像: opt-in で AVIF を利用可能（WebP 比で約20% 低サイズ）。設定例: images.formats = ['image/avif','image/webp']。最適化は WebP より時間がかかる点に注意。
• Bot-aware ISR Fallback: fallback: true の初回リクエスト時に、検索エンジン等のクローラーには自動でサーバーサイドレンダリングを提供し、ローディング状態のインデックス化を防ぎます。
• 出力ファイルトレース: @vercel/nft を使ってページ/ルートごとの依存ファイルをトレース出力。従来の target アプローチは非推奨で、将来的なスタンドアロン出力を容易にします。
• その他の実務的変更: next.config.mjs をサポート、next lint --file で単一ファイルの ESLint、カスタム tsconfig パスの指定、Fast Refresh の接続方式変更（WebSocket）。破壊的変更として webpack 4 は削除され webpack 5 のみ。

アップグレード時はカスタム Babel 設定、webpack プラグイン、サードパーティの互換性を事前に確認してください。