VercelがNext.js 16.3をリリースしました。これにより、TurbopackとPartial Prerenderingが実験的段階を終え、プロダクション環境向けの安定版へと移行しました。このアップグレードにより、中規模のアプリケーションではビルド速度が2〜5倍向上し、Time to Interactive（TTI）は40〜60%短縮されることが期待されます。これは、機能リリースを急ぐあらゆるチームにとって大きな恩恵となるでしょう。

なぜ今、この変更が重要なのか

Next.jsは長らく、開発とプロダクションの両方のビルドにおいて、JavaScriptで書かれたJavaScriptバンドラーであるWebpackに依存してきました。この1年間、VercelチームはRustベースの代替手段であるTurbopackを磨き上げ、メモリ使用量の削減とビルドの高速化を実現してきました。同時に、静的なHTMLとオンザフライの動的コンテンツを組み合わせる手法としてPartial Prerendering（PPR）のテストも行ってきましたが、これまでは開発者が「実験的なオプトイン」として扱う必要がありました。両方を安定版へと昇格させることで、Vercelはプロダクションチームに対し、試行錯誤を繰り返すことなく、すぐに利用可能なパフォーマンス向上を提供します。

Turbopackが安定版に

  • 速度: 中規模のリポジトリにおけるプロダクションビルドが、2〜5倍高速化されました。
  • メモリ: 大規模なコードベースにおけるメモリ負荷を軽減します。
  • 有効化: next.config.js に turbo: true を追加するだけで完了です。

トレードオフとして、より厳格な環境が必要になります。TurbopackにはNode 18.17以降が必要であり、プロジェクトが依存しているカスタムWebpackプラグインはTurbopackでは動作しません。広範なプラグインパイプラインを持つチームは、切り替える前にそれらの拡張機能を監査または書き換える必要があります。

Server Actionsがよりスムーズに

サーバー上で実行され、クライアントから呼び出される関数であるServer Actionsは、TypeScriptとの統合がより強化されました。コンパイラが型を自動的に推論するため、開発者は手動での型注釈を省略できるようになります。また、ネストされたオブジェクトやZodスキーマをエンドツーエンドで理解するため、実行時の不一致が減少します。新しいファイルシステム規約により、アクションの解決が明示的になり、曖昧なインポートによる微妙なバグを防ぐことができます。

Partial Prerendering (PPR) がプロダクション対応に

PPRを使用すると、単一のページ内で、変化しない部分は静的なHTMLとして提供し、動的なセクションは別途ハイドレーション（hydration）させることができます。静的なマークアップは即座に描画され、バックグラウンドでのフェッチによってインタラクティブな要素が動き出します。このアプローチにより、Time to Interactive (TTI) が40〜60%改善されます。

PPRの実装は簡単です。既存の静的生成APIを使用して静的な部分をマークし、動的な部分はクライアントサイドレンダリングにフォールバックさせます。静的なHTMLは完全なドキュメントとして届くため、JavaScriptが実行される前にブラウザがレンダリングを開始でき、低速なネットワーク環境でも体感パフォーマンスが向上します。

その他の注目すべき調整

  • 画像最適化: LCP (Largest Contentful Paint) 画像に fetchPriority を設定できるようになり、ブラウザがヒーロー画像を優先的に取得できるようになりました。
  • フォント処理: next/font が文字を自動的にサブセット化し、追加の設定なしにペイロードサイズを削減します。
  • Middleware: マッチングエンジンがRustで書き直され、ルートチェックが高速化されました。また、Middlewareが完全なHTMLレスポンスを返せるようになり、エッジレンダリングされたページへの道が開かれました。

チームがすぐに行うべきステップ

  1. Turbopackを有効にする: 開発環境で有効にしてください。turbo フラグを設定すれば、プロダクションでも同様に動作します。
  2. Nodeをアップグレードする: バージョン20以上にアップグレードしてください。
  3. Server Actionsを見直す: 型推論のメリットを享受するために、不要になった手動の型注釈を削除してください。
  4. Partial Prerenderingを試験導入する: サイト全体に展開する前に、トラフィックの多い単一のルートでPPRを試行し、TTIの改善を測定してください。

注意点と懸念事項

パフォーマンスの向上は、新しいランタイム要件を満たしているかどうかに依存します。古いNodeバージョンを使用しているプロジェクトや、カスタムWebpackプラグインに大きく依存しているプロジェクトでは、摩擦が生じる可能性があります。

結論: Next.js 16.3は、プロダクショングレードのRust搭載バンドラーと、静的コンテンツと動的コンテンツを融合させる実証済みの手法を開発者に提供します。新しいデフォルト設定を採用し、互換性のギャップを修正すれば、ビルドがより速く完了し、エンドユーザーにとってページが明らかにキビキビと動作するようになるでしょう。