Next.js15の主な新機能と14からの移行際の問題点

はじめまして！

Web開発者として7年間働いているmessifanです。
Next.js 15公式バージョンがリリースされました。
新しい版では、さまざまな新機能が追加されました。

React 19 Support(私の意見では、これが最も重要なアップデートだと思います。)
ESLint 9 Support(ESLint 8との互換性を維持しています。)
Async Request API
Caching Behavior
...
それでは、まず、Next.js以前のバージョン(ここではNext.js 14)からのアップデートプロセスを簡単に説明します。

Next.js 14からNext.js 15への移行

アップグレードコードモッドを使用する
アップグレードする最も簡単な方法は、Next.jsが提供するアップグレードcodemodを使うことです。ターミナルで次のコマンドを実行します。

npx @next/codemod@canary upgrade latest

手動アップグレード
手動で行う場合は、最新バージョンのNext.jsとReactをインストールする必要があります。以下のコマンドを実行してください。

npm install next@latest react@rc react-dom@rc eslint-config-next@latest

ピア依存の処理
ピア依存の警告が表示された場合は、reactとreact-domを推奨されるバージョンにアップデートする必要があるかもしれません。あるいは、--forceまたは--legacy-peer-depsフラグを使って警告を無視することもできます。
TypeScriptの調整
TypeScriptを使用している場合は、一時的にReactの型をオーバーライドする必要があります。詳細はReact 19 RCアップグレードガイドを参照してください。
非同期リクエスト API の更新
いくつかのAPIは非同期に更新されました。例えば、Cookie APIはプロミスを返すようになりました。

// 15以前
const cookieStore = cookies();
const token = cookieStore.get('token');

// 15
const cookieStore = await cookies();
const token = cookieStore.get('token');

詳細はこちらからご覧いただけます。
変更をチェック
変更点を認識し、それに従ってコードを更新します。例えば、useFormStateはuseActionStateに置き換えられました。

Next.js 14からNext.js 15への移行の利点

Next.js 14からNext.js 15への移行には、開発体験やアプリケーションのパフォーマンスを向上させるいくつかのメリットがあります。以下に代表的な改善点を挙げます。

キャッシングセマンティクスの改善
GETルートハンドラーとクライアントサイドのナビゲーションはデフォルトでキャッシュされなくなり、古いデータの問題を減少させ、ユーザーが常に最新のコンテンツを見ることができるようになります。

性能の向上
Turbopackの安定版は、ローカルサーバーの起動とコードの更新を大幅に高速化します。これにより、起動時間が最大76.7％短縮され、コード更新が最大96.3％速くなり、開発がより効率的になります。
また、静的ページの生成方法の改善により、特に多数のページや複雑なデータ取得ルーチンを持つアプリケーションにおいて、ビルド時間が短縮されます。

非同期レンダリングのサポート向上
非同期リクエスト処理への移行により、リクエスト固有のデータに依存しないコンポーネントを事前に準備することができ、効率的なレンダリングが可能になります。これにより、高負荷アプリケーションでのレンダリングが速くなり、ユーザー体験が向上します。

React 19のサポート
Next.js 15はReact 19をサポートし、ハイドレーションエラーの改善を導入しており、最新のReact機能を使用したアプリケーションの構築が簡単かつ信頼性が高くなります。

フォームコンポーネントの改善
<Form>コンポーネントは、クライアントサイドのナビゲーションやプリフェッチ機能を内蔵しており、ユーザビリティとパフォーマンスが大幅に向上します。

ハイドレーションエラーの改善
ハイドレーション問題に対するエラーメッセージが強化され、問題解決のための明確なガイダンスが提供され、デバッグが容易になります。
...

移行時の考慮点

ただし、これらの新機能を利用するためには、以下の点に注意する必要があります。

実例として、Next.js 15では、キャッシュセマンティクスと非同期リクエストAPIを中心に廃止された変更を導入しています。開発者は、新しい標準に準拠するために既存のコードベースを修正する必要があり、特に大規模なプロジェクトの場合、かなりの労力が必要になる可能性があります。
また、一部のサードパーティライブラリや依存関係は、Next.js 15で導入された変更をまだサポートしていない場合があります。 特に、新しいレンダリング戦略や非同期APIに関連する変更は、ランタイムエラーや予期しない動作を引き起こす可能性があります。
next/codemodのようなツールは、移行作業を自動化するのに役立ちますが、すべての側面を処理するわけではなく、手動で更新する必要があり、時間とリソースを消費します。

結論

Next.js 15へのアップグレードは、特に新しいプロジェクトを始める際には素晴らしい選択です。チームメンバーがNext.jsの基本的な慣習に熟知している場合、更新をためらわずに行うことをお勧めします。

ここまでお読みいただき、ありがとうございました！次のプロジェクトでNext.js 15を試す予定の方々は、ぜひ感想や体験をシェアしてください！