Next.jsのv15の変更点

今日はNext.js 15のリリースがあったので、変更点を自分なりにまとめてみます。 https://nextjs.org/blog/next-15

@next/codemod CLIを使ったスムーズにアップグレード

こちらのコマンドを実行することで、ソースコード内にある破壊的変更を自動で更新してくれて、Next.jsの15にスムーズにアップグレードすることができるそうです。

APIの非同期通信(破壊的変更)

もともとはサーバーサイドレンダリングのときに、レンダリングするまえにサーバーはリクエストを待っていました。 しかし、すべてのリクエストがサーバーを待つ必要はないので、Next.js 15ではAPIの非同期通信が可能になりました。 headers, cookies, params, searchParamsなどのリクエストデータが非同期で取得できるようになりました。

こちらのコマンドを実行することで、APIを非同期に変更することができます。

デフォルトではGet Router Handlerも、ページコンポーネントもキャッシュしないように変更

元々Next.jsではデフォルトでキャッシュするようになっていましたが、Next.js 15ではデフォルトではキャッシュしないように変更されました。 キャッシュをする場合はそれぞれでキャッシュをするように設定する必要があります。

React 19

Next.js 15ではまだ安定版がリリースされていないReact 19がサポートされるようになりました。 App RouterではReact 19の機能を使っています。一方で、Pages Routerでは準備ができ次第React 19にアップグレードができるそうです。

Turbopackの開発

next dev --turboコマンドが安定バージョンになりました。 Turbopackを使うことで、開発時のパフォーマンスが向上するそうです。

静的ページのインジケータ

開発中に静的ページはインジケータが表示されるようになりました。

unstable_afterを使ってレスポンスの後にコードを実行

ログやアナリティクスなどレスポンスに関係ない処理をafterを使って実行することで、ユーザーを待たせることなく処理を行うことができるようになりました。

instrumentation.js

instrumentationファイルのregister()APIを使用することで、Next.jsの内部の処理を監視することができるようになりました。 また、onRequestErrorを使うことで、サーバーでエラーが発生したときにSentryなどの監視ツールにエラーを送信することができるようになりました。

<Form>コンポーネント

<Form>コンポーネントが追加されました。 <Form>コンポーネントを使うことで、prefetching, client-side navigationの機能を使うことができるようになりました。 これは検索するときなどに、<Form>で新しいページに遷移するときに便利になります。

next.config.tsのサポート

TypescriptでNext.jsの設定ファイルを書くことができるようになりました。

セルフホスティングの向上

セルフホスティングをするとき、Cache-Controlヘッダーをコントロールする必要があります。 v15からはCache-ControlはNext.jsによって上書きされることがないので、開発者が自分で設定する必要があります。

サーバーアクションのセキュリティ向上

使用されていないサーバーアクションはJSのバンドルから削除されるようになり、パフォーマンスが向上しました。 また、サーバーアクションにはクライアントが参照、呼び出すことを可能にするためのIDがそれぞれに割り当てられるようになりました。

外部パッケージのバンドルの最適化

外部パッケージをバンドルするとアプリケーションのコールドスタートのパフォーマンスが向上します。 App Routerでデフォルトで外部パッケージがバンドルされるのですが、特定のパッケージをバンドルしないように設定することもできます。 Pages Routerでは、外部パッケージがデフォルトではバンドルされないのですが、設定でバンドルすることもできるようになります。

Eslint 9をサポート

ESLint 8のサポート終了に伴い、Next.js 15ではESLint 9がサポートされるようになりました。

開発とビルドの向上

サーバーコンポーネントのホットリロード

今までは開発時にコードが保存されるとサーバーアクションはそのたびに実行され、fetchリクエストが呼ばれていました。 しかし、Next.js 15ではfetchのレスポンスが再利用されるようになりパフォーマンスが向上しました。

App Routerの静的ページ生成の高速化

今まではページを2回レンダリングしていましたが、キャシュり利用することでNext.js 15では1回でページをレンダリングするようになりました。

個人的な感想

結構変更が多く、変更を追うのに時間がかかりました。 App Router周りの変更も多く、改めてApp RouterがNext.jsの中心になっていることを感じました。 このブログもNext.js 15にアップグレードして、新機能を使っていきたいです。