初めに
Nextの方でv15でのリリース候補のv2が出たのでめっちゃ簡単にざっとまとめていきたいと思います
Next.js 15 RC 2
上記リンクの方から詳細については確認することができます
改善内容
1. キャッシュが強制キャッシュからオプトインに変更
Turbopack for Development
キャッシュの動作が自動的に適用されるのではなく、自分たちで明示的にキャッシュの使用を選択することができるよになりそうです
従来はSSRやSSGの際に自動でキャッシュが適用され、更新が頻繁に必要なデータや保護が必要な情報がキャッシュされてしまう可能性があったのですが、今回のオプトイン方式によりキャッシュを使用するかどうかを自分たちで細かく制御できるようになり、意図しないキャッシュが避けられるようになりそうです。
2. cookieの取得が非同期になる
Async Request APIs (Breaking Change)
cookies
や headers
などリクエストに依存するAPIがこれまで同期的に扱われていたものが非同期に変更されるので、これらのAPIを利用しているコードは既存のコードベースに変更を加える必要がありそうです
Nextからコード変換のためのcodemodが提供されていそうです
npx @next/codemod@canary next-async-request-api .
3. Formコンポーネントが追加
Form Component
HTML の <form>
を拡張したもので、下記の特徴がありそうです
- Prefetching: フォームが表示されたときナビゲーションに必要なレイアウトやロードUIが事前に読み込まれるため、ナビゲーションが高速になる
- Client-side Navigation: フォームが送信された際、クライアント側の状態を維持したままページ遷移が行われる
- Progressive Enhancement: JavaScript がまだ読み込まれていない場合でも、従来のページ遷移としてフォームが機能する
4. instrumentation.js が安定版(Stable)になった
instrumentation.js
Next.js サーバーのライフサイクルにフックし、パフォーマンスの監視やエラーの追跡を行うことができます
onRequestError
フックを使えばサーバー上で発生したエラーをキャプチャし、エラーレポートを Sentry のような外部の監視サービスに送信できるようです
5. Server Actions のセキュリティ強化
-
Dead codeの削除:使用されていない Server Actions はビルド時に削除されクライアントサイドの JavaScript バンドルに公開されることがなくなることにより、バンドルサイズが縮小され、不要なコードの公開リスクが減る
-
セキュアなアクションIDの生成:Next.js では、クライアントが Server Actions を呼び出すための 推測が難しいアクションIDを生成することにより、アクションIDを推測して不正にアクセスされるリスクが軽減される
-
公開エンドポイントの最小化:使用されない Server Actions はビルド時に自動的に削除されるため、無意識に公開されてしまう HTTP エンドポイントの数が減る
6. 開発環境でのパフォーマンス向上
Turbopack for Development
ビルド時間の短縮や Hot Module Replacement (HMR) による効率的なリフレッシュ、メモリ使用量の削減など開発中の体験を改善するための変更がありそうです。
7.Next.js の設定ファイル(従来は next.config.js)を TypeScript で書くことが可能
Support for next.config.ts
ありがたし
8. ESLint 9 のサポート
ESLint 9 Support
Next.js 15 からはESLint 9 がサポートされそうです。今のプロジェクトでも9にできていなかったのでやっと修正できそうです
まとめ
破壊的変更も含まれているため、自分のプロジェクトへの影響や改善点をしっかりと把握しておきたいですね
Next Confも今週あるので、そこでの発表もキャッチアップしておかないとですね