Next.jsのバージョン15の技術情報を個人用にまとめてます。
ざっくりとまとめておりますので、詳細が気になる方は公式ドキュメントを参照しておりますので確認してみてください。
1.アップグレード用CLIの強化
@next/codemod というCLIツールを利用して、Next.js、Reactを最新バージョンに簡単にアップグレードできるようになりました。依存関係の更新なども行ってくれるらしい
2.非同期リクエストAPI
リクエスト固有のデータに依存するAPIが非同期化する。
レンダリングをするにあたってリクエストを待機する必要がなくなり、レンダリングが早くなる
cookie、headers、draftMode、params、SearchParamなどが該当します。
3.キャッシュのデフォルト化を解除
Next.jsは複数のキャッシュ機能が実装されており、不要な場合はオプトアウトできる機能を備えていました。
バージョン15ではそれが解除され、オプトインする形式に変更された。
4.React19、React18との互換性
バージョン15ではAppRouterをReact19RC版で使用する。
又、React18でPagesRouterを使用できるので、バージョン15の恩恵を受けながらPagesRouterを使用することが可能である。
公式を見るとReact19はRC版の段階ではあるが、テストは十分で安定性の確保はできているみたいです。
Turbopack開発が安定化
TurbopackDevが安定板になった
Turbopackの詳細はこちら
5.静的ルートインジケーター
開発中に静的ルートインジケータが表示されるようになり、静的or動的ルーティングを識別しやすくなった。
6.unstable_after API
レスポンス又はプリレンダリングの完了後に実行するタスクをスケジュールすることが出来る。
7.instrumentation.jsの安定化
Nextサーバーのライフサイクルを利用してパフォーマンス監視、エラーの原因を追跡し、OpenTelemetryなどの観測ライブラリと深く統合できる。
8.セルフホスティングの改善
Cache-Controlディレクティブをより細かく制御できるようになった。
next.configでexpireTime値を設定できる。又、デフォルト値を一年に更新し、Cache-Controlがカスタム値をデフォルト値で上書きしなくなり完全な制御が可能になった。
9.サーバーアクションのセキュリティ強化
デッドコードの排除で使用されていないサーバーアクションのIDはクライアント側のJavaScriptバンドルに公開されないため、バンドルサイズが削減し、パフォーマンスが向上する。
アクションIDを憶測不可能で非決定的なものを生成。IDはビルド間で定期的に再計算されるためセキュリティ強化が期待できる。
外部パッケージのバンドルを最適化
AppRouterでは外部パッケージがデフォルトでバンドルされますが、serverExternalPackages構成オプションを使用して特定のパッケージをオプトアウトできます。
ESLint9をサポート
ESLint8のサポートが2024年10月5日終了することに伴い、ESLint9のサポートが導入されました。
Next.jsでは下位互換性を維持しており、ESLint8も引き続き使用できる
開発とビルドの改善
ローカル開発のパフォーマンス向上、課金対象のAPI呼び出しの潜在的なコストを削減するために、HMRが以前のレンダリングからの応答を再利用できるウようになった。
AppRouterの静的生成を高速化。