Next.js 15リリース⁠React 19をサポート

Vercelは2024年10月21日、同社が開発を主導するWebアプリケーションフレームワークNext.jsの最新バージョンNext.js 15をリリースした。

Next.jsはオープンソースのWebアプリケーションフレームワーク。Reactをベースとして開発され、サーバ側でのレンダリング(SSR)や静的サイトジェネレーター(SSG)の機能を持ち、Webアプリの表示を高速化できる。

Next.js 15のおもな新機能は以下の通り。

新しいアップグレード用CLI
@next/codemod というCLIを使って最新のNext.jsおよびReactバージョンに簡単にアップグレードできるようになった。依存関係の自動更新やコード変換に対応している。
非同期リクエストAPI
header、cookie、params、searchParamsなど、リクエスト固有のデータに依存するAPIを非同期APIに移行。リクエスト固有データに依存しないコンポーネントをリクエスト到着前に準備できるため、レンダリングを速くすることができる。マイグレーションを容易にするため、次のメジャーバージョンまでこれらのAPIは同期アクセスも可能となるが、開発および本番環境では警告が表示される。
キャッシュ方針の変更
fetchリクエスト、GET Route Handlers、Client Routerがデフォルトでキャッシュされなくなった。
React 19のサポート
React 19、およびReactコンパイラ(現在は実験的な段階)をサポート。またハイドレーションエラーの際に、エラーのソースコードと問題への対処法が提案されるようになった。
Turbopack Devが安定版に
Vercelが開発するRustベースの高速モジュールハンドラTurbopack Devが安定版となり、Webアプリのパフォーマンスと安定性が向上した。
静的ルートインジケーター
開発中に静的ルートインジケーターが表示されるようになり、どのルートが静的か動的かが識別しやすくなった。これによりページがどのようにレンダリングされるかを把握し、パフォーマンス最適化がしやすくなる。
unstable_after API
ログ記録、分析、その他の外部システム同期など、応答に直接関係しないタスクをトリーミングが終了した後に実行することで、プライマリ応答をブロックせずにセカンダリ タスクを実行できるようになる。
instrumentation.js APIの安定版を提供
サーバーのライフサイクルの監視のための新しいAPI。ライフサイクルを利用してパフォーマンスを監視し、エラーの原因を追跡しOpenTelemetryなどの可観測性ライブラリと緊密に統合できる。
拡張formコンポーネント
プリフェッチやクライアントサイドナビゲーション、プログレッシブ拡張等の機能によりHTMLのform要素を拡張できる。
next.configファイルタイプをサポート
TypeScriptのnext.config.tsファイルタイプをサポートすることで、オートコンプリートとタイプセーフオプション用のNextConfigタイプを提供する。
セルフホスティングの改善
Cache-Controlヘッダをより細かく制御できるようになった。next.configでexpireTime値を扱えるようになり、stale-while-revalidate期間のデフォルト値を1年に更新、またカスタムCache-Control値をデフォルト値で上書きしなくなったため完全な制御が可能になり、あらゆるCDN設定と互換になった。セルフホスティング時の画像最適化も改善。
Server Actionsのセキュリティ強化
デッドコードを排除し、使用されていないServer ActionsのIDはクライアント側のJavaScriptバンドルに公開されない。また推測不可能なアクションIDを生成し、これをセキュリティ強化のためビルドに間で定期的に再計算する。クライアントはIDを参照してServer Actionsを呼び出せるようになった。
外部パッケージのバンドル最適化を安定
新しいserverExternalPackages構成オプションを使用して、App Routerでデフォルトでバンドルされている外部パッケージのうち特定のパッケージをオプトアウトできる。
ESLint 9のサポート
2024年10月5日にサポート終了となったESLint 8に代わり、ESLint 9のサポートが追加された。下位互換性維持のためユーザはESLint 8または9のいずれかを選択できる。
開発とビルドのパフォーマンス改善
ビルド時間が短縮され、リフレッシュが高速化された。

おすすめ記事

記事・ニュース一覧