Skip to main content

版本 15

从 14 升级到 15​

¥Upgrading from 14 to 15

要更新到 Next.js 版本 15，请使用你首选的包管理器运行以下命令：

¥To update to Next.js version 15, run the following command using your preferred package manager:

npm i next@rc react@rc react-dom@rc eslint-config-next@rc
yarn add next@rc react@rc react-dom@rc eslint-config-next@rc
pnpm up next@rc react@rc react-dom@rc eslint-config-next@rc
bun add next@rc react@rc react-dom@rc eslint-config-next@rc

很高兴知道：如果你使用 TypeScript，请确保还将 @types/react 和 @types/react-dom 升级到最新版本。

¥Good to know: If you are using TypeScript, ensure you also upgrade @types/react and @types/react-dom to their latest versions.

最低 React 版本​

¥Minimum React version

  • 最小 react 和 react-dom 现在为 19。

    ¥The minimum react and react-dom is now 19.

fetch 请求​

¥fetch requests

fetch 请求 不再默认缓存。

¥fetch requests are no longer cached by default.

要将特定的 fetch 请求选择为缓存，你可以传递 cache: 'force-cache' 选项。

¥To opt specific fetch requests into caching, you can pass the cache: 'force-cache' option.

export default async function RootLayout() {
  const a = await fetch('https://...') // Not Cached
  const b = await fetch('https://...', { cache: 'force-cache' }) // Cached

  // ...
}

要将布局或页面中的所有 fetch 请求选择为缓存，你可以使用 export const fetchCache = 'default-cache' 段配置选项。如果单个 fetch 请求指定了 cache 选项，则将改用该选项。

¥To opt all fetch requests in a layout or page into caching, you can use the export const fetchCache = 'default-cache' segment config option. If individual fetch requests specify a cache option, that will be used instead.

// Since this is the root layout, all fetch requests in the app
// that don't set their own cache option will be cached.
export const fetchCache = 'default-cache'

export default async function RootLayout() {
  const a = await fetch('https://...') // Cached
  const b = await fetch('https://...', { cache: 'no-store' }) // Not cached

  // ...
}

路由处理程序​

¥Route Handlers

路由处理程序 中的 GET 功能不再默认缓存。要将 GET 方法选择为缓存，你可以在路由处理程序文件中使用 路由配置选项（例如 export const dynamic = 'force-static'）。

¥GET functions in Route Handlers are no longer cached by default. To opt GET methods into caching, you can use a route config option such as export const dynamic = 'force-static' in your Route Handler file.

export const dynamic = 'force-static'

export async function GET() {}

客户端路由缓存​

¥Client-side Router Cache

通过 <Link> 或 useRouter 在页面之间导航时，page 段不再从客户端路由缓存中重用。但是，它们在浏览器前后导航期间以及共享布局中仍会被重用。

¥When navigating between pages via <Link> or useRouter, page segments are no longer reused from the client-side router cache. However, they are still reused during browser backward and forward navigation and for shared layouts.

要将页面段选择为缓存，你可以使用 staleTimes 配置选项：

¥To opt page segments into caching, you can use the staleTimes config option:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
}

module.exports = nextConfig

布局 和 加载状态 仍被缓存并在导航时重用。

¥Layouts and loading states are still cached and reused on navigation.

next/font​

@next/font 包已被删除，取而代之的是内置的 next/font。代码模式可用 可以安全、自动地重命名你的导入。

¥The @next/font package has been removed in favor of the built-in next/font. A codemod is available to safely and automatically rename your imports.

// Before
import { Inter } from '@next/font/google'

// After
import { Inter } from 'next/font/google'

bundlePagesRouterDependencies​

experimental.bundlePagesExternals 现已稳定并重命名为 bundlePagesRouterDependencies。

¥experimental.bundlePagesExternals is now stable and renamed to bundlePagesRouterDependencies.

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Before
  experimental: {
    bundlePagesExternals: true,
  },

  // After
  bundlePagesRouterDependencies: true,
}

module.exports = nextConfig

serverExternalPackages​

experimental.serverComponentsExternalPackages 现已稳定并重命名为 serverExternalPackages。

¥experimental.serverComponentsExternalPackages is now stable and renamed to serverExternalPackages.

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Before
  experimental: {
    serverComponentsExternalPackages: ['package-name'],
  },

  // After
  serverExternalPackages: ['package-name'],
}

module.exports = nextConfig

速度洞察​

¥Speed Insights

Next.js 15 中删除了 Speed Insights 的自动检测。

¥Auto instrumentation for Speed Insights was removed in Next.js 15.

要继续使用 Speed Insights，请遵循 Vercel Speed Insights 快速入门 指南。

¥To continue using Speed Insights, follow the Vercel Speed Insights Quickstart guide.