Next.js をバージョン14から15にアップデートした

こんにちは、 Gaji-Labo フロントエンドエンジニアのよしざわです。
Gaji-Laboでは React や Next.js 等を利用してスタートアップ支援をしており、先日 Next.js 14 で開発中だったプロジェクトで Next.js のアップデートを行なったため、今回はその感想とポイントをお話ししたいと思います。

実際に皆さんが対応する場合は、こちらの Next.js 公式ドキュメントも併せて参考にしてください。

今回対応した変更

Next.js 14 から Next.js 15 への変更差分は多々ありますが、今回のプロジェクトにおいて、Next.js 15 での変更点で重要なポイントは以下の2点でした。

1. ランタイム情報に関する同期APIが非同期に変更
2. デフォルトでキャッシュされない挙動に変更

特に実装への影響が大きかったのが、ランタイム情報に関する同期APIが非同期に変更されたことでした。
私たちのプロジェクトではほぼ全ページでパスパラメータやクエリパラメータを利用していた他、 cookie を利用するクライアントコンポーネントも多々あったため多くのコンポーネントやページを修正しました。

ランタイム情報に関する同期APIが非同期に変更されたことへの対応

ランタイム情報とは、具体的にはパスパラメータやクエリパラメータ、 cookie を含む header 情報などが含まれます。

パスパラメータやクエリパラメータは、 app/page.tsx や app/layout.tsx で React.use や await を使って Promise から外してあげればバージョン変更前と同じように扱えます。この辺りは恐らくそこまで大変ではなく、 公式提供の codemod を使えばスムーズに進められると思います。

type Params = Promise<{ slug: string }>

// 非同期コンポーネントの場合
export default Page = async (props: { params: Params }) => {
  const { slug } = await params;
}

// 同期コンポーネントの場合
export default Page = (props: { params: Params }) = {
  const params = use(props.params);
}

cookie に関してですが、私たちのプロジェクトでは cookies-next ライブラリを利用していました。元々クライアントコンポーネントでは getCookies 関数をサーバー実行時とクライアント実行時で使い分けていたのですが、 Next.js 15 からはサーバー実行時の getCookies 関数が非同期になってしまったためこれができなくなりました。
そのため、該当コンポーネントを非同期コンポーネントに変更しクッキーをサーバーで取得し、クライアントコンポーネントには children で渡すように変更しました。 cookies/next ライブラリの useGetCookies フックを利用すればクライアントコンポーネントのまま柔軟にクッキーを利用することができます。

Next.js 15 へのアップデートをスムーズに進めるために

use cache ディレクティブの利用やランタイムの変更を検討している場合はさらに多くの修正が必要になります。
しかしとりあえず Next.js のバージョンだけ上げておきたいといった場合では、公式の codemod を利用することである程度自動で実装を修正してくれるので、スムーズに移行することができると思います。

Next.js 15 にすることで、 Next.js 15 の機能だけでなくReact 19 の機能も使うことができるようになるので、余裕があれば早めのアップデートをお勧めします。

今後も web フロントエンドの変化に追従し、常に最新の最適なアプローチを提供したいと思います。