Summary

Next.js 10.2 はビルドと開発体験の大幅な性能改善と実用的な機能追加を含むリリースです。主な改良点は webpack 5 の展開、増強されたキャッシュによるビルド高速化、Fast Refresh と起動時間の改善、アクセシビリティ強化、ヘッダ／クッキー／クエリへのマッチ条件を使ったリダイレクト／リライト、そして自動ウェブフォント最適化です。アップデートは npm i next@latest を実行してください。

Key Points

• パフォーマンス
  • 継続ビルドでのディスクキャッシュにより最大約60% の高速化（Vercel の事例）。
  • Fast Refresh を優先コンパイルし、リフレッシュが約100–200ms 速く。
  • next dev の起動が最大で約24% 改善。
• webpack 5
  • next.config.js にカスタム webpack 設定がないアプリは自動で webpack 5 を使用開始。
  • これにより長期キャッシュの安定化、CommonJS のツリーシェイク改善などの恩恵あり。
  • カスタム設定を使っている場合はドキュメントに従って手動で有効化を推奨。
• ルーティングと条件マッチ
  • has プロパティでヘッダ、クッキー、クエリ文字列を条件にした rewrites/redirects/headers が可能に。
  • User-Agent や地理情報、認証フラグによるリダイレクト例が提供。
• 自動ウェブフォント最適化
  • Google Fonts の CSS をビルド時にインライン化し FCP/LCP を改善。
  • 今後別プロバイダ対応や読み込み戦略制御を予定。
• アクセシビリティ
  • クライアントサイドのルート変更時にスクリーンリーダーへページ変更を自動で通知（h1 → title → pathname の順でページ名決定）。

Practical Actions for Engineers

• すぐにアップグレード: npm i next@latest
• カスタム webpack を使っている場合: ドキュメントを確認して webpack 5 対応を手動で行う。
• rewrites/redirects に has を使ってヘッダ／クッキー／クエリベースのルーティングを導入する検討。
• 自動フォント最適化を利用して FCP/LCP を改善。フォントの挙動を確認し必要なら今後のオプションを注視。