naopoyo.com
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About

目次

© naopoyo

目次

最近更新された記事

🚈

Claude Code メモ

6日前·2026年02月18日
  • Claude Code
🎼

Rails + React 構成についてのメモ

7日前·2026年02月16日
  • Rails
  • React
🎣

GitHub App Webhook で push を処理するとき、知っておきたい制約と対処法

7日前·2026年02月16日
  • GitHub
  • Ruby
🚩

Next.js 16にアップグレードする

公開日4か月前2025-10-23
更新日4か月前2025-10-27
履歴GitHubで見る
MarkdownRaw Content
  • Next.js

簡易手順

Terminal
npx @next/codemod@canary upgrade latest

ES 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-compiler
next.config.ts
// ...
const nextConfig: NextConfig = {
  // ...
  reactCompiler: true,
  // ...
}
// ...

middleware to proxy

middleware.ts のファイル名を proxy.ts に変更する必要がある。

Renaming Middleware to Proxy
nextjs.org favicon
nextjs.org

ブックマーク

Upgrading: Version 16 | Next.js
Upgrade your Next.js Application from Version 15 to 16.
nextjs.org favicon
nextjs.org
Upgrading: Version 16 | Next.js