簡易手順
Terminal
npx @next/codemod@canary upgrade latestES Lint の設定ファイルを更新
FlatCompat を使わなくなっているので以下のように修正する。
eslint.config.mjs
import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";
const eslintConfig = defineConfig([
...nextVitals,
...nextTs,
// Override default ignores of eslint-config-next.
globalIgnores([
// Default ignores of eslint-config-next:
".next/**",
"out/**",
"build/**",
"next-env.d.ts",
]),
]);
export default eslintConfig;'use cache' を使うための設定
next.config.ts
// ...
const nextConfig: NextConfig = {
// ...
cacheComponents: true,
// ...
}
// ...React Compiler を有効化する
以下の対応が必要。
babel-plugin-react-compilerの追加next.config.tsに設定の追加
Terminal
pnpm add -E -D babel-plugin-react-compilernext.config.ts
// ...
const nextConfig: NextConfig = {
// ...
reactCompiler: true,
// ...
}
// ...middleware to proxy
middleware.ts のファイル名を proxy.ts に変更する必要がある。
Renaming Middleware to Proxy
Next.js by Vercel is the full-stack React framework for the web.
nextjs.org
ブックマーク
How to upgrade to version 16
Upgrade your Next.js Application from Version 15 to 16.
nextjs.org
