如何升级到版本 16

{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

Next Devtools, help me upgrade my Next.js app to version 16

Next Devtools, migrate my Next.js app to cache components

npx @next/codemod@canary upgrade latest

npm install next@latest react@latest react-dom@latest

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack",
    "start": "next start"
  }
}

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

{
  "scripts": {
    "dev": "next dev",
    "build": "next build --webpack",
    "start": "next start"
  }
}

import type { NextConfig } from 'next'
 
// Next.js 15 - experimental.turbopack
const nextConfig: NextConfig = {
  experimental: {
    turbopack: {
      // options
    },
  },
}
 
export default nextConfig

import type { NextConfig } from 'next'
 
// Next.js 16 - turbopack 位于 nextConfig 的顶层
const nextConfig: NextConfig = {
  turbopack: {
    // options
  },
}
 
export default nextConfig

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  turbopack: {
    resolveAlias: {
      fs: {
        browser: './empty.ts', // 我们建议在使用此方法之前修复代码导入
      },
    },
  },
}
 
export default nextConfig

@import '~bootstrap/dist/css/bootstrap.min.css';

@import 'bootstrap/dist/css/bootstrap.min.css';

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  turbopack: {
    resolveAlias: {
      '~*': '*',
    },
  },
}
 
export default nextConfig

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
}
 
export default nextConfig

export default async function Page(props: PageProps<'/blog/[slug]'>) {
  const { slug } = await props.params
  const query = await props.searchParams
  return <h1>Blog Post: {slug}</h1>
}

// Next.js 15 - 同步 params 访问
export function generateImageMetadata({ params }) {
  const { slug } = params
  return [{ id: '1' }, { id: '2' }]
}
 
// Next.js 15 - 同步 params 和 id 访问
export default function Image({ params, id }) {
  const slug = params.slug
  const imageId = id // string
  // ...
}

// Next.js 16 - 异步 params 访问
export async function generateImageMetadata({ params }) {
  const { slug } = await params
  return [{ id: '1' }, { id: '2' }]
}
 
// Next.js 16 - 异步 params 和 id 访问
export default async function Image({ params, id }) {
  const { slug } = await params // params 现在是异步的
  const imageId = await id // 使用 generateImageMetadata 时，id 现在是 Promise<string>
  // ...
}

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  reactCompiler: true,
}
 
export default nextConfig

npm install -D babel-plugin-react-compiler

'use server'
 
import { revalidateTag } from 'next/cache'
 
export async function updateArticle(articleId: string) {
  // 将文章数据标记为过时 - 文章读者在重新验证时看到过时数据
  revalidateTag(`article-${articleId}`, 'max')
}

'use server'
 
import { updateTag } from 'next/cache'
 
export async function updateUserProfile(userId: string, profile: Profile) {
  await db.users.update(userId, profile)
 
  // 使缓存过期并立即刷新 - 用户立即看到他们的更改
  updateTag(`user-${userId}`)
}

'use server'
 
import { refresh } from 'next/cache'
 
export async function markNotificationAsRead(notificationId: string) {
  // 在数据库中更新通知
  await db.notifications.markAsRead(notificationId)
 
  // 刷新标题中显示的通知计数
  refresh()
}

import {
  unstable_cacheLife as cacheLife,
  unstable_cacheTag as cacheTag,
} from 'next/cache'

import { cacheLife, cacheTag } from 'next/cache'

/** @type {import('next').NextConfig} */
const nextConfig = {
  cacheComponents: true,
}
 
module.exports = nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 如果你今天正在使用 PPR
  // 请保持在当前的 Next.js 15 canary 中
  experimental: {
    ppr: true,
  },
}
 
module.exports = nextConfig

# 重命名你的 middleware 文件
mv middleware.ts proxy.ts
# 或
mv middleware.js proxy.js

export function proxy(request: Request) {}

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  skipProxyUrlNormalize: true,
}
 
export default nextConfig

import Image from 'next/image'
 
export default function Page() {
  return <Image src="/assets/photo?v=1" alt="Photo" width="100" height="100" />
}

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  images: {
    localPatterns: [
      {
        pathname: '/assets/**',
        search: '?v=1',
      },
    ],
  },
}
 
export default nextConfig

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  images: {
    minimumCacheTTL: 60,
  },
}
 
export default nextConfig

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  images: {
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}
 
export default nextConfig

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  images: {
    qualities: [50, 75, 100],
  },
}
 
export default nextConfig

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  images: {
    dangerouslyAllowLocalIP: true, // 仅适用于私有网络
  },
}
 
export default nextConfig

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  images: {
    maximumRedirects: 0, // 禁用重定向
    // 或
    maximumRedirects: 5, // 增加以应对边缘情况
  },
}
 
export default nextConfig

// 之前
import Image from 'next/legacy/image'
 
// 之后
import Image from 'next/image'

// image.domains 已弃用
module.exports = {
  images: {
    domains: ['example.com'],
  },
}

// 请改用 image.remotePatterns
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
      },
    ],
  },
}

npx next internal trace .next/dev/trace-turbopack

import { notFound } from 'next/navigation'
 
export default function Default() {
  notFound()
}

export default function Default() {
  return null
}

export default function RootLayout({ children }) {
  return (
    <html lang="en" data-scroll-behavior="smooth">
      <body>{children}</body>
    </html>
  )
}

import { startServer } from 'docs-lib/dev-server'
 
const isDev = process.env.NODE_ENV === 'development'
 
if (isDev) {
  startServer()
}
 
const nextConfig = {
  /* Your config options */
}
 
module.exports = nextConfig

const nextConfig = {
  experimental: {
    adapterPath: require.resolve('./my-adapter.js'),
  },
}
 
module.exports = nextConfig

// 已删除
import { useAmp } from 'next/amp'
 
// 已删除
export const config = { amp: true }

const nextConfig = {
  // 已删除
  amp: {
    canonicalBase: 'https://example.com',
  },
}
 
export default nextConfig

npx @next/codemod@canary next-lint-to-eslint-cli .

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 不再支持
  // eslint: {},
}
 
export default nextConfig

module.exports = {
  serverRuntimeConfig: {
    dbUrl: process.env.DATABASE_URL,
  },
  publicRuntimeConfig: {
    apiUrl: '/api',
  },
}

import getConfig from 'next/config'
 
export default function Page() {
  const { publicRuntimeConfig } = getConfig()
  return <p>API URL: {publicRuntimeConfig.apiUrl}</p>
}

async function fetchData() {
  const dbUrl = process.env.DATABASE_URL
  // 仅用于服务器端操作
  return await db.query(dbUrl, 'SELECT * FROM users')
}
 
export default async function Page() {
  const data = await fetchData()
  return <div>{/* render data */}</div>
}

NEXT_PUBLIC_API_URL="/api"

'use client'
 
export default function ClientComponent() {
  const apiUrl = process.env.NEXT_PUBLIC_API_URL
  return <p>API URL: {apiUrl}</p>
}

import { connection } from 'next/server'
 
export default async function Page() {
  await connection()
  const config = process.env.RUNTIME_CONFIG
  return <p>{config}</p>
}

// Next.js 15 - experimental.dynamicIO 现已删除
module.exports = {
  experimental: {
    dynamicIO: true,
  },
}

// Next.js 16 - 请改用 cacheComponents
module.exports = {
  cacheComponents: true,
}