はじめに
Amplify Hosting は以前から Next.js 15 をサポートしていましたが、Amplify JS ライブラリや Amplify UI を利用できませんでした。
そのため、実質的には Amplify で Next.js 15 は使えない状況でした。
Amplify JS が Next.js 15 をサポートし、 Amplify UI も React 19 をサポートしたため、ようやく本格的に Amplify で Next.js 15 が利用できるようになりました。
Next.js 15 への移行の利点
分かりやすい利点は以下でしょう。
React 19 のサポート
個人的には use useActionState などを使えるのがありがたいです。
React 19 の新機能については、以下の記事などですでにまとめられています。
ESLint 9 のサポート
ESLint 8 がすでに EOL を迎えているため、9 のサポートを要望する声が、以前から多かったです。
Form コンポーネントの登場
簡単に言うと従来の <form> コンポーネントまわりの実装が簡単になります。
以下の記事が分かりやすいです。
その他の変更点
他にも Next.js 15 では以下のような変更点があります。
- @next/codemod CLI: 最新のNext.jsおよびReactバージョンへのアップグレードを簡単にするCLIツール。
- 非同期リクエストAPI（破壊的変更）: 簡素化されたレンダリングとキャッシュモデルへの段階的な移行。
- キャッシュのセマンティクス（破壊的変更）: fetchリクエスト、GETルートハンドラー、およびクライアント- ナビゲーションがデフォルトでキャッシュされなくなりました。
- Turbopack開発（安定版）: パフォーマンスと安定性の向上。
- 静的インジケーター: 開発中に静的ルートを表示する新しいビジュアルインジケーター。
- unstable_after API（実験的）: レスポンスのストリーミングが完了した後にコードを実行するAPI。
- instrumentation.js API（安定版）: サーバーライフサイクルの可観測性を提供する新しいAPI。
- next.config.ts: next.config.tsでのTypeScriptサポート。
- セルフホスティングの改善: Cache-Controlヘッダーの制御を強化。
- サーバーアクションのセキュリティ: 推測不可能なエンドポイントと未使用アクションの削除。
- 外部パッケージのバンドル（安定版）: AppおよびPages Router用の新しい設定オプション。
- 開発およびビルドのパフォーマンス: ビルド時間の短縮および高速なFast Refreshを実現。
まとめ
Amplify JS と Amplify UI が最新の React 19 と Next.js 15 に対応したことで、ようやく Amplify 環境で Next.js 15 をフル活用できるようになりました。
Next.js 15 への移行は、プロジェクトの効率と生産性を上げる絶好の機会です。
新機能を活用し、モダンな開発体験を楽しみましょう！
追記（2025/1/1）
FileUploader など、一部のコンポーネントを使用するとエラーが発生します。
下記の issue に報告したところ、バグとして修正対応してくれるようです。
その他にもバグが残っている可能性があるため、使用の際はご注意ください。