はじめに
Next.js 15.2が出たので、アップグレード内容について書いていきます。
アップグレード内容
主なアップグレード内容は以下となります。
- エラーUIとスタックトレースが刷新
- Streaming Metadataにより初期表示が高速化
- Turbopackのコンパイル時間短縮とメモリ効率向上
- React View Transitions API（実験的）を追加
- Node.js Middleware（実験的）のサポートが導入
エラーUIとスタックトレースが刷新
エラーになった時のUIがとても見やすくなり、スタックトレースについても、どこでエラーになったかがよりわかりやすくなった印象を受けました。
以下のように表示されます。
とてもかっこいい...
開発インジケータを開くと以下の情報がわかります。
- 現在のルートのレンダリング モード (静的/動的)
- Turbopack コンパイル状況
- エラーオーバーレイに素早くアクセスできるアクティブエラー
Streaming Metadataにより初期表示が高速化
Next.jsには動的なメタタグを埋め込むためのAPIである、generateMetadataというAPIがあります。
このAPIを利用した際に、これまでは非同期なページ遷移をした場合に、ブロッキングが発生していたみたいです。
それが、今回のアップデートによって、ストリーミングで使われるようになったので、パフォーマンスの改善が期待できます。
また、この挙動はボットごとに変えることができ、ボットごとに細かく制御をしたい場合は、next.configで「htmlLimitedBots」オプションを指定することで、ボットにサービスを提供するために使用される正規表現をカスタマイズできます。
・参考
Turbopackのコンパイル時間短縮とメモリ効率向上
Turbopackは、バージョン15で安定化したJavaScriptバンドラーで、Vercelチームによって開発されています。(かなり力を入れていそう)
Rustで書かれており、Webpack の後継として位置づけられています。
今回のアップデートでは、以下のような更新があったみたいです。
-
コンパイル時間の短縮:
Next.js 15.1と比較して、ルートにアクセスする際のコンパイル時間が最大57.6%短縮されたと報告されているみたいです。 -
メモリ使用量の削減:
Vercelにデプロイしたアプリケーションでは、ローカル開発中にメモリ使用量が 30%減少したことが確認されたみたいです。
React View Transitions API（実験的）を追加
View Transitions（ビュートランジション）は、ページ間やコンポーネント間の遷移時に、アニメーションを実装するための仕組みです。
この機能を使うと、アプリケーション内の様々なビューとコンポーネント間でアニメーションを入れることができます。
機能を有効化するには、以下をConfigに記載する必要があります。
module.exports = {
experimental: {
viewTransition: true,
},
};
Node.js Middleware（実験的）のサポートが導入
こちらが今回のアップデートの目玉となるものかと思います。(コミュニティからの最大の要望であったみたい)
今まで、Next.jsのMiddlewareでは、Node.jsランタイムが利用できませんでした。
今回のアップデートで試験的にですが、利用できるようになり、Next.jsにおける、Middlewareの利便性がより高まっていくと考えられます。
機能を有効化するには、以下をConfigに記載する必要があります。
module.exports = {
experimental: {
nodeMiddleware: true,
},
};
最後に
他にも色々な記事を書いているので、よければ読んでいってください！