Next.js 15 RC

Next.js 15 候选版本 (RC) 现已发布。此早期版本可让您在即将发布的稳定版本之前测试最新功能。

React： 支持 React 19 RC、React Compiler（实验性）和 Hydration 错误改进
缓存： 默认情况下不再缓存fetch请求、GET
部分预渲染（实验性）： 新的布局和页面配置选项，可供逐步采用
next/after（实验）： 响应流完成后执行代码的新 API
create-next-app： 更新了设计和新标志，以便在本地开发中启用 Turbopack
捆绑外部包（稳定）： App 和 Pages Router 的新配置选项

立即试用 Next.js 15 RC：

终端

npm install next@rc react@rc react-dom@rc

注意：您可以在rc.nextjs.org/docs查看 Next.js 15 RC 文档直到 Next.js 15 GA。

React 19 RC

Next.js App Router 建立在 React金丝雀频道上用于框架，这使得开发人员能够在 v19 发布之前使用这些新的 React API 并提供反馈。

Next.js 15 RC 现在支持 React 19 RC，其中包括客户端和服务器的新功能，例如 Actions。

阅读Next.js 15 升级指南，React 19 升级指南并观看React Conf 主题演讲了解更多。

注意： 某些第三方库可能尚不兼容 React 19。

React 编译器（实验性）

React编译器是 React 团队在 Meta 上创建的一个新实验性编译器。该编译器通过对纯 JavaScript 语义和React 规则的理解，可以深入理解你的代码，这使其能够为您的代码添加自动优化。编译器通过诸如useMemo和之类的 API 减少了开发人员必须执行的手动记忆量useCallback- 使代码更简单、更易于维护且更不容易出错。

在 Next.js 15 中，我们添加了对React Compiler的支持。

安装babel-plugin-react-compiler：

终端

npm install babel-plugin-react-compiler

然后，添加experimental.reactCompiler选项next.config.js：

接下来是配置

const nextConfig = {  experimental: {    reactCompiler: true,  },}; module.exports = nextConfig;

或者，您可以将编译器配置为以“选择加入”模式运行，如下所示：

接下来是配置

const nextConfig = {  experimental: {    reactCompiler: {      compilationMode: 'annotation',    },  },}; module.exports = nextConfig;

注意： React Compiler 目前只能通过 Babel 插件在 Next.js 中使用，这可能会导致构建时间变慢。

了解有关React Compiler 的更多信息以及可用的 Next.js 配置选项。

水合误差改进

Next.js 14.1对错误消息和 Hydration 错误进行了改进。Next.js 15 继续在此基础上进行改进，添加了改进的 Hydration 错误视图。Hydration 错误现在会显示错误的源代码，并提供有关如何解决问题的建议。

例如，这是 Next.js 14.1 中先前的水化错误消息：

Next.js 14.1 中的 Hydration 错误消息

Next.js 15 RC 对此进行了改进：

Next.js 15 RC 中改进了 Hydration 错误消息

缓存更新

Next.js App Router 推出了自定义缓存默认值。这些默认值旨在默认提供性能最高的选项，并可在需要时选择退出。

根据您的反馈，我们重新评估了缓存启发式方法以及它们如何与部分预渲染（PPR）等项目以及使用第三方库进行交互fetch。

fetch在 Next.js 15 中，我们将请求、路由处理程序和客户端路由器缓存的缓存默认GET设置从默认缓存更改为默认不缓存。如果您想保留以前的行为，可以继续选择加入缓存。

我们将在接下来的几个月内继续改进 Next.js 中的缓存，并将在 Next.js 15 GA 公告中分享更多细节。

`fetch`默认情况下不再缓存请求

Next.js 使用Web fetch API 缓存选项用于配置服务器端获取请求如何与框架的持久 HTTP 缓存交互：

fetch('https://...', { cache: 'force-cache' | 'no-store' });

no-store- 每次请求时都从远程服务器获取资源，并且不更新缓存
force-cache- 从缓存（如果存在）或远程服务器获取资源并更新缓存

在 Next.js 14 中，如果未提供选项，则force-cache默认使用，除非使用了动态函数或动态配置选项。cache

在 Next.js 15 中，如果未提供选项，no-store则默认使用。这意味着默认情况下不会缓存获取请求。cache****

您仍然可以通过以下方式选择加入缓存fetch请求：

设置cache选项force-cache通过一次fetch调用即可
设置dynamic路由配置选项至'force-static'单条路线
设置fetchCache路由配置选项覆盖布局或页面中的'default-cache'所有请求，除非它们明确指定自己的选项fetch``force-cache``cache

`GET`路由处理程序不再默认缓存

在 Next 14 中，使用GETHTTP 方法的路由处理程序默认会被缓存，除非它们使用了动态函数或动态配置选项。在 Next.js 15 中，GET函数默认不会被缓存。

您仍然可以使用静态路由配置选项（例如）选择加入缓存export dynamic = 'force-static'。

特殊路由处理程序，例如sitemap.ts，opengraph-image.tsx，和icon.tsx以及其他元数据文件除非它们使用动态函数或动态配置选项，否则默认保持静态。

客户端路由器缓存不再默认缓存页面组件

在 Next.js 14.2.0 中，我们引入了实验性的staleTimes允许自定义配置路由器缓存的标志。

在 Next.js 15 中，此标志仍然可以访问，但我们正在将默认行为更改为对页面段进行更改。这意味着当您在应用程序中导航时，客户端将始终反映作为导航的staleTime一部分0处于活动状态的页面组件的最新数据。但是，仍有一些重要的行为保持不变：

共享布局数据不会从服务器重新获取以继续支持部分渲染。
后退/前进导航仍将从缓存中恢复，以确保浏览器可以恢复滚动位置。
Loading.js将保留缓存5分钟（或配置的值staleTimes.static）。

您可以通过设置以下配置来选择以前的客户端路由器缓存行为：

接下来是配置

const nextConfig = {  experimental: {    staleTimes: {      dynamic: 30,    },  },}; module.exports = nextConfig;

逐步采用部分预渲染（实验性）

在 Next.js 14 中，我们引入了部分预渲染 (PPR) - 一种结合静态和动态渲染的优化在同一页上。

除非使用动态函数，否则 Next.js 目前默认为静态渲染例如cookies()、、headers()以及未缓存的数据请求。这些 API 将整个路由选择为动态渲染。使用 PPR，您可以将任何动态 UI 包装在 Suspense 边界中。当新请求进入时，Next.js 将立即提供静态 HTML shell，然后在同一个 HTTP 请求中渲染和流式传输动态部分。

为了允许逐步采用，我们添加了experimental_ppr路线配置选项，用于将特定的布局和页面选择到 PPR 中：

应用程序/页面.jsx

import { Suspense } from "react"import { StaticComponent, DynamicComponent } from "@/app/ui" export const experimental_ppr = true export default function Page() {  return {     <>	     <StaticComponent />	     <Suspense fallback={...}>		     <DynamicComponent />	     </Suspense>     </>  };}

要使用新选项，您需要将文件experimental.ppr中的配置设置next.config.js为'incremental'：

接下来是配置

const nextConfig = {  experimental: {    ppr: 'incremental',  },}; module.exports = nextConfig;

一旦所有段都启用了 PPR，您就可以安全地将值设置ppr 为 true，并为整个应用程序和所有未来路线启用它。

我们将在 Next.js 15 GA 博客文章中分享有关 PPR 路线图的更多信息。

详细了解部分预渲染。

在响应后执行代码`next/after`（实验性）

在处理用户请求时，服务器通常会执行与计算响应直接相关的任务。但是，您可能需要执行日志记录、分析和其他外部系统同步等任务。

由于这些任务与响应没有直接关系，因此用户不必等待它们完成。在响应用户后推迟工作是一个挑战，因为无服务器函数在响应关闭后立即停止计算。

after()是一个新的实验性 API，它通过允许您在响应完成流式传输后安排要处理的工作来解决此问题，从而使辅助任务能够在不阻塞主响应的情况下运行。

要使用它，请添加experimental.after到next.config.js：

接下来是配置

const nextConfig = {  experimental: {    after: true,  },}; module.exports = nextConfig;

然后，在服务器组件、服务器操作、路由处理程序或中间件中导入该函数。

import { unstable_after as after } from 'next/server';import { log } from '@/app/utils'; export default function Layout({ children }) {  // Secondary task  after(() => {    log();  });   // Primary task  return <>{children}</>;}

学习更多关于next/after。

`create-next-app`更新

对于 Next.js 15，我们已更新了create-next-app新的设计。

Next.js 15 RC 中 create-next-app 的新设计

运行时create-next-app，会出现一个新的提示询问您是否要启用 Turbopack 进行本地开发（默认为No）。

终端

✔ Would you like to use Turbopack for next dev? … No / Yes

该--turbo标志可用于启用 Turbopack。

终端

npx create-next-app@rc --turbo

为了使新项目的启动更加轻松，我们--empty在 CLI 中添加了一个新标志。这将删除所有无关的文件和样式，从而生成一个极简的“hello world”页面。

终端

npx create-next-app@rc --empty

优化外部包的捆绑（稳定）

捆绑外部软件包可以提高应用程序的冷启动性能。在App Router中，默认捆绑外部软件包，您可以使用新的serverExternalPackages配置选项。

在Pages Router中，默认情况下不会捆绑外部包，但你可以使用现有的transpilePackages选项。使用此配置选项，您需要指定每个包。

为了统一 App 和 Pages Router 之间的配置，我们引入了一个新选项，bundlePagesRouterDependencies以匹配 App Router 的默认自动捆绑。然后您可以使用serverExternalPackages如果需要的话，选择退出特定的套餐。

接下来是配置

const nextConfig = {  // Automatically bundle external packages in the Pages Router:  bundlePagesRouterDependencies: true,  // Opt specific packages out of bundling for both App and Pages Router:  serverExternalPackages: ['package-name'],}; module.exports = nextConfig;

了解有关优化外部包的更多信息。

其他变化

[突发] React 最低版本现已为 19 RC
[突发] next/image：已删除squoosh，改为sharp可选依赖项 ( PR）
[突发] 下一个/图像：将默认更改Content-Disposition为attachment( PR）
[突发] src next/image：当有前导或尾随空格时出错（ PR）
[突发] 中间件：应用react-server条件来限制不推荐的 React API 导入 ( PR）
[突发] next/font：删除了对外部@next/font包的支持 ( PR）
[突发] 下一个/字体：删除font-family散列（PR）
[突发] 缓存：force-dynamic现在将为no-store获取缓存设置默认值（PR）
[突发] 配置：启用swcMinify( PR), missingSuspenseWithCSRBailout（公共关系)，以及outputFileTracing( PR) 默认行为并删除已弃用的选项
[突发] 删除 Speed Insights 的自动检测功能（现在必须使用专用的@vercel/speed-insights包）（PR）
[改进] 在开发和生产中对齐站点地图 URL（PR）
[改进] metadataBase元数据：更新了托管在 Vercel 上时的环境变量回退( PR）
[改进] 修复混合命名空间和命名导入的 tree-shaking 问题optimizePackageImports（PR）
[改进] 并行路由：提供所有已知参数的无匹配捕获全部路由 ( PR）
[改进] 配置bundlePagesExternals现已稳定并重命名为bundlePagesRouterDependencies
[改进] 配置serverComponentsExternalPackages现已稳定并重命名为serverExternalPackages
[改进] create-next-app：新项目.env默认忽略所有文件 ( PR）
[文档] 改进身份验证文档 ( PR）
[文档] @next/env软件包 ( PR）

要了解更多信息，请查看升级指南。