最終確認日
Next.js バージョンアップデートをする(2026年1月)
現状把握
プロジェクト直下で実行
node -v
npm -v # or pnpm -v / yarn -v
npx next --version
実行結果
$ node -v
v22.8.0
$ npm -v uruly/updateNextjs
10.8.2
$ npx next --version
Next.js v15.2.4
次に依存関係の最新版候補を確認
npm outdated # or pnpm outdated / yarn outdated
実行結果
Next.js のバージョンのみをあげてみる
まずは Next.js 本体のバージョンのみを上げてみる。
npm i next@latest # or pnpm add next@latest / yarn add next@latest
実行結果
added 2 packages, removed 7 packages, changed 9 packages, and audited 727 packages in 7s
259 packages are looking for funding
run `npm fund` for details
5 vulnerabilities (3 low, 2 moderate)
To address all issues, run:
npm audit fix
Run `npm audit` for details.
何か色々言われているがとりあえずアップデートができているか確認。
$ npx next --version
Next.js v16.1.4
その後に build と dev を行ってみる。
npm run build
npm run dev
ここで落ちたエラーを直していくぞい。
発生したエラー①
ESLint のエラーが起きている。
Running TypeScript .Failed to compile.
./next.config.ts:4:3
Type error: Object literal may only specify known properties, and 'eslint' does not exist in type 'NextConfig'.
2 |
3 | const nextConfig: NextConfig = {
> 4 | eslint: {
| ^
5 | // Warning: This allows production builds to successfully complete even if
6 | // your project has ESLint errors.
7 | ignoreDuringBuilds: true,
Next.js build worker exited with code: 1 and signal: null
これはNext.js 16 以降は next lint が廃止され、それに伴って next.config の eslint オプションも不要になったらしい。
【Next.js 16】next lint 廃止により起きる lint 失敗と ESLint CLI 移行手順の通りに修正する。
next.config.tsから eslint オプションを削除package.jsonをnext lintからeslint .に変更eslint.config.mjsを用意する
もう一度 npm run build をしよう。
このエラーは消えたのでok。
発生したエラー②
続いて revalidateTag でエラーが起きた。
Running TypeScript ...Failed to compile.
./src/app/api/revalidate/route.ts:27:7
Type error: Expected 2 arguments, but got 1.
25 | for (const tag of tags) {
26 | console.log("Revalidating tag:", tag);
> 27 | revalidateTag(tag);
| ^
28 | }
29 | } else {
30 | console.log("No tags provided. Skipping revalidateTag.");
Next.js build worker exited with code: 1 and signal: null
Next.js のドキュメント - revalidateTagを見ると引数が増えている。
revalidateTag(tag: string, profile: string | { expire?: number }): void;
- tag: 再検証したいデータに関連付けられたキャッシュタグを表す文字列です。256文字を超えることはできません。この値は、大文字と小文字を区別します。
- profile: 再検証の動作を指定する文字列です。推奨される値は「max」で、stale-while-revalidate セマンティクスを提供します。または、cacheLife で定義されている他のデフォルトまたはカスタムプロファイルを指定することもできます。カスタム有効期限の動作のために、expire プロパティを持つオブジェクトを渡すこともできます。
とのことなので max をわたそう。修正したら npm run build を再度実行。
成功したので npm run dev も実行してみる。無事にローカル環境でみれたでok。
各ライブラリをアップデートしていく
各ライブラリをアップデートしていく。
npm update
実行結果
added 24 packages, removed 25 packages, changed 148 packages, and audited 726 packages in 29s
263 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
再度 npm outdated を確認してみる
$ npm outdated
Package Current Wanted Latest Location Depended by
@types/jest 29.5.14 29.5.14 30.0.0 node_modules/@types/jest uruly.xyz
@types/node 20.19.30 20.19.30 25.0.10 node_modules/@types/node uruly.xyz
dotenv 16.6.1 16.6.1 17.2.3 node_modules/dotenv uruly.xyz
eslint-config-next 15.2.4 15.2.4 16.1.4 node_modules/eslint-config-next uruly.xyz
jest 29.7.0 29.7.0 30.2.0 node_modules/jest uruly.xyz
eslint-config-next を Next.js のバージョンに揃える
Next.js v16.1.4 に合わせる。
npm i -D eslint-config-next@latest
実行結果
added 5 packages, removed 1 package, changed 3 packages, and audited 730 packages in 2s
265 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
バージョンがあげられたら動作確認をしてみる
npm run lint
ok .
Node のバージョンを上げる
Next.js 16 を使うなら Node 20.9 以上が必須(Node.js runtime and browser support)
現在 20.19.30 まで上がったのでさらにあげないといけない。
Node 24（Active LTS）にあげてみる。本体をまずあげる。
$ nvm install 24
Downloading and installing node v24.13.0...
Downloading https://nodejs.org/dist/v24.13.0/node-v24.13.0-darwin-arm64.tar.xz...
########################################################################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v24.13.0 (npm v11.6.2)
$ node -v
v24.13.0
Next.js プロジェクト上でも更新
npm i -D @types/node@24
ok.
react/react-dom も更新
npm install react@latest react-dom@latest
ok.
その他 Next.js 16系でやること
How to upgrade to version 16をみる。
起きたWarning
ビルド時に起きていたwarning
The "middleware" file convention is deprecated. Please use "proxy" instead. Learn more: https://nextjs.org/docs/messages/middleware-to-proxy
middleware to proxyに書かれている。
mv middleware.ts proxy.tsでproxy.tsにリネームするexport function middleware(request: NextRequest) {をproxyに変更middleware.test.tsもproxy.test.tsにリネーム- テストの中身も
proxyに変更
okなはず。
公開日
更新日