-
CVE-2025-29927によるNext.jsのMiddlewareでパッチバージョンの脆弱性対応してたのもあり、14 -> 15にあげようとする対応は並行して検討してた
- 脆弱性対応前から
npx @next/codemod@canary upgrade latestによるマイグレーションですんなり15にアップできないか気になっていたのもある- 数ヶ月に1回はcodemod実行してみるぐらいは気になってた
- 手作業的に変更しないといけない箇所が多くすぐには対応できんとなりだいぶ見送ってたがcodemodが改善されていき、自動で更新できるようになってきてたので思い切りがついた
- codemod、フレームワークのアップグレードについては@manabuyasudaさんの
フレームワークのアップグレード作業を計画的に進めるための手順
をみると良さそう
- 数ヶ月に1回はcodemod実行してみるぐらいは気になってた
- 脆弱性対応前から
- Next.js 15.3 からのTurbopack Builds (alpha)
- デプロイ速くしたかった
- ついでにReactのバージョンアップしたかった
npx @next/codemod@canary upgrade latest 実行
この時のcodemodのバージョンとして 15.4.0-canary.20 だった
以下、ウィザードで実行した内容
? Please manually add "--turbopack" to your dev command. › run-p dev:*
-> Enter
? The following codemods are recommended for your upgrade. Select the ones to apply.
-> (v15.0.0-canary.171) next-async-request-api を選択
? Would you like to run the React 19 upgrade codemod?
-> Enter
? Would you like to run the React 19 Types upgrade codemod?
-> Enter
Upgrading your project to Next.js 15.3.1...
-> page.tsxで使用されているsearchParams, paramsなどの非同期APIの置換が自動で行われる
その他、next/headersを使用したheaders, cookiesなどの非同期APIには
/* @next-codemod-error The APIs under 'next/headers' are async now, need to be manually awaited. */
というコメントを追加され、async / awaitに置換された
? Is your app deployed to Vercel? (Required to apply the selected codemod)
-> n を入力し Enter
package.jsonの変更点
- "@next/bundle-analyzer": "^14.1.0",
+ "@next/bundle-analyzer": "15.3.1",
- "@next/third-parties": "^14.2.5",
+ "@next/third-parties": "15.3.1",
- "next": "14.2.28",
+ "next": "15.3.1",
- "react": "^18",
+ "react": "19.1.3",
- "react-dom": "^18",
+ "react-dom": "19.1.3",
- "@types/react": "^18",
+ @types/react": "19.1.2",
- "@types/react-dom": "^18",
+ "@types/react-dom": "19.1.3",
- "eslint-config-next": "14.0.4",
+ "eslint-config-next": "15.3.1",
あとは手入力で npm scriptにある next dev、next build に --turbopackのオプションを追加した
import { cookies } from 'next/headers';
- export const getCookie = (name: string) => {
- return cookies().get(name)?.value || '';
+ export const getCookie = async (name: string) => {
+ return (await cookies()).get(name)?.value || '';
}
ログイン周りでCookie扱ってる処理があったので実際に動作確認した
Next.jsの型定義参照先を next/types に変更
- import { NextPage } from 'next';
+ import { NextPage } from 'next/types';
このときはまだcodemodで自動に置換されなかったので手動で修正
MUI周り更新
storybook + storycapによるリグレッションあったのでスクショの差分確認ぐらいで済んだ
package.jsonの変更点
- "@emotion/cache": "^11.11.0",
+ "@emotion/cache": "11.14.0",
- "@emotion/react": "^11.11.4",
+ "@emotion/react": "11.14.0",
- "@emotion/styled": "^11.11.0",
+ "@emotion/styled": "11.14.0",
- "@mui/base": "^5.0.0-beta.40",
+ "@mui/base": "^5.0.0-beta.70",
- "@mui/icons-material": "^5.15.13",
+ "@mui/icons-material": "7.0.2",
- "@mui/material": "^5.15.13",
+ "@mui/material": "7.0.2",
- "@mui/material-nextjs": "^5.15.11",
+ "@mui/material-nextjs": "7.0.2",
- "@mui/x-date-pickers": "^7.2.0",
+ "@mui/x-date-pickers": "8.2.0",
@mui/material 5.X -> 7.Xによる変更点
Gridの仕様が変わった
Grid container>
-
+ + md: 3,
+ }}>
...
/Grid>
Auth.js更新
ログイン / ログアウトによるCookieの処理と同時に確認
package.jsonの変更点
- "next-auth": "^5.0.0-beta.5",
+ "next-auth": "5.0.0-beta.27",
Sentry更新
Next.js Turbopack Supportにて現状のサポートの範囲は以下になる
Current Status (Last Update May 5, 2025)
| Feature | Support | Notes |
|---|---|---|
| Next.js app compiles and runs without issues | ✅ | |
| Server-side instrumentation | ✅ | |
| Client-side instrumentation | ✅ | – Upgrade to SDK version 9.9.0 or greater – Upgrade to Next.js canary 15.3.0-canary.8 or greater – Add instrumentation-client.ts file with Sentry.init() call. (sentry.client.config.ts can be replaced with instrumentation-client.ts. It serves the same purpose.) |
| Server-side instrumentation | ✅ | – Upgrade SDK to version 9.11.0 |
| Source Maps | ❌ | – Needs runAfterProductionCompile hook implemented in Next.js (done in Next.js 15.4.0-canary.19) – Needs way to inject debug IDs into bundles implemented in Next.js |
| React Component Name Annotations | ❌ | – Needs way to transform code in Next.js – Will likely not be possible for the forseeable future |
対象の画面でのエラーログさえ収集できていれば良いのでSource Mapsは未対応でも良い判断をした
package.jsonの変更点
- "@sentry/nextjs": "^7.102.0",
+ "@sentry/nextjs": "9.17.0",
@sentry/nextjs 7.X -> 9.Xによる変更点
7.Xのときは以下のファイルでSentryの設定を行なっていた
sentry.client.config.ts
sentry.edge.config.ts
sentry.server.config.ts
Initialize Sentry Client-Side and Server-Side SDKs、Register Sentry Server-Side SDK Initialization
よりSentryの設定を src/instrumentation.tsと src/instrumentation-client.ts に移した
src/instrumentation.ts
import * as Sentry from '@sentry/nextjs';
export function register() {
if (process.env.NEXT_RUNTIME === 'nodejs') {
Sentry.init({
environment: process.env.NEXT_PUBLIC_ENV,
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN_KEY,
integrations: [
Sentry.captureConsoleIntegration({
levels: ['error'],
}),
],
attachStacktrace: true,
tracesSampleRate: 0,
});
}
if (process.env.NEXT_RUNTIME === 'edge') {
Sentry.init({
environment: process.env.NEXT_PUBLIC_ENV,
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN_KEY,
integrations: [
Sentry.captureConsoleIntegration({
levels: ['error'],
}),
],
attachStacktrace: true,
tracesSampleRate: 0,
});
}
}
src/instrumentation-client.ts
import * as Sentry from '@sentry/nextjs';
Sentry.init({
environment: process.env.NEXT_PUBLIC_ENV,
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN_KEY,
integrations: [
Sentry.replayIntegration(),
Sentry.captureConsoleIntegration({
levels: ['error'],
}),
],
attachStacktrace: true,
tracesSampleRate: 0,
});
export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
MUIやSentryなど1世代飛ばして更新してたりするので対応としてお粗末なとこがあるかも
Views: 0
