Next.js 15へのアップグレード備忘録
はじめに
2024年10月、Next.js 15がリリースされました。
私が所属するプロジェクトでNext.js 15へのアップグレード作業を行いましたが、今後も別プロジェクトにおいて同様の作業が発生するため、備忘録的に作業内容を書き記します。
なお、本記事の内容はアップグレードに関わる手順全てを網羅しておらず、あくまで今回行った手順をまとめたものになります。作業の際は、必ず公式のアップグレードのガイドもご参照ください。
やったこと
Codemod適用
公式よりNext.jsを14から15にアップグレードするためのCodemodが提供されているので、これを適用しました。
$ npx @next/codemod@canary upgrade latest
最初にTurbopackを有効にするかの選択肢が出てきますが、2025年2月現在、当該プロジェクトで利用している@sentry/nextjsがTurbopackを完全にサポートしていないとのことなので、今回はTurbopackは有効にしませんでした。
また、Codemod適用に際し、オプションを利用するかの選択肢が出てきました。当該プロジェクトではURLパラメータ等の取得の非同期処理化について影響があったため、next-async-request-apiのオプションを適用しました。
なお、オプションについては、
$ npx @next/codemod@canary next-async-request-api
のようにすることで、個別に後から適用することができます。
Reactに依存するライブラリのアップグレード
Codemod実行後、Reactに依存するライブラリについて、下記のようにReactのバージョンに関する警告が表示されました。
✔ Codemods have been applied successfully.
⚠ Found 4 dependencies that seem incompatible with the upgraded package versions.
You may have to update these packages to their latest version or file an issue to ask for support of the upgraded libraries.
@mui/icons-material 5.16.4
├── ✕ unmet peer react@"^17.0.0 || ^18.0.0": found 19.0.0
└── ✕ unmet peer @types/react@"^17.0.0 || ^18.0.0": found 19.0.8
@mui/material 5.16.4
├── ✕ unmet peer react@"^17.0.0 || ^18.0.0": found 19.0.0
├── ✕ unmet peer react-dom@"^17.0.0 || ^18.0.0": found 19.0.0
└── ✕ unmet peer @types/react@"^17.0.0 || ^18.0.0": found 19.0.8
@mui/x-date-pickers 7.11.0
├── ✕ unmet peer react@"^17.0.0 || ^18.0.0": found 19.0.0
└── ✕ unmet peer react-dom@"^17.0.0 || ^18.0.0": found 19.0.0
swr 2.2.5
└── ✕ unmet peer react@"^16.11.0 || ^17.0.0 || ^18.0.0": found 19.0.0
これらのライブラリは最新版がReact 19に対応しているため、ライブラリを（作業当時の）最新バージョンにアップグレードしました。
アップグレードに当たっては、個別にアップグレードを行うと依存関係のエラーが発生してしまうので、一度に全てのライブラリをアップグレードする必要があります。
$ npm update @mui/icons-material @mui/material @mui/x-date-pickers swr
next.config.js修正
NextConfigのオプションが一部変更されたので、next.config.jsの修正を行いました。
当該プロジェクトではswcMinify: trueを指定していましたが、バージョンアップに伴いこのオプションが削除されたため、これを削除しました。
（修正しなくとも動作には影響ありませんでしたが、next devを実行したときに下記のような警告が出ます）
✓ Starting...
⚠ Invalid next.config.js options detected:
⚠ Unrecognized key(s) in object: 'swcMinify'
⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
ページコンポーネントのテストの修正
Codemodでnext-async-request-apiを実行した際、URLパラメータ等を利用しているページコンポーネントは以下の通りに修正されます。
+ import { use } from "react";
- export default function Page({ params }: { params: { id: string } }) {
+ export default function Page(props: { params: Promise<{ id: string }> }) {
+ const params = use(props.params);
これに伴い、コンポーネントのレンダリングのテストを行っているような箇所でも、propsにPromiseを渡すよう修正しました。
it('should be rendered', async () => {
- await act(() => render(<Page params={{ id: "1" }} />));
+ await act(() => render(<Page params={new Promise((resolve) => resolve({ id: "1" }))} />));
修正箇所が複数ある場合、例えば下記のようにユーティリティ関数を用意すると良いかもしれません。
const convertProps: <T>(props: T) => Promise<T> = (props) => new Promise((resolve) => resolve(props));
await act(() => render(<Page params={convertProps({ id: "1" })} />));
さいごに
本記事ではNext.js 15へアップグレードした際の作業内容を記しました。
今後別プロジェクトでもNext.jsのアップグレード作業が発生する見込みなので、新たにわかったことがあったら本記事に追記したいと思います。
Discussion