Next.js 15 候选发布版 (RC)

Next.js 15 候选发布版 (RC) 现已推出。这个早期版本允许您在即将发布的稳定版之前测试最新功能。

• React 支持: 兼容 React 19 RC 版本，提供 React 编译器（实验性功能）和水合错误改进
• 缓存机制更新: fetch 请求、GET 路由处理器和客户端导航默认不再缓存
• 部分预渲染 (实验性): 新增布局和页面配置选项支持渐进式采用
• next/after (实验性): 新增 API 可在响应流结束后执行代码
• create-next-app 更新: 更新了设计并新增标志位支持本地开发启用 Turbopack
• 外部包打包优化 (稳定版): 为应用和页面路由提供新的配置选项

立即尝试 Next.js 15 RC：

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

React 19 RC 支持

Next.js 应用路由基于 React 的 canary 频道构建，这使得开发者能够在 v19 正式发布前使用这些新 React API 并提供反馈。

Next.js 15 RC 现已支持 React 19 RC，该版本包含面向客户端和服务端的新功能（如 Actions）。

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

注意： 部分第三方库可能尚未兼容 React 19。

React 编译器 (实验性)

React 编译器 是由 Meta React 团队创建的新实验性编译器。该编译器通过对原生 JavaScript 语义和 React 规则 的深入理解，能够为代码添加自动优化。编译器减少了开发者手动记忆的需求（如使用 useMemo 和 useCallback API），使代码更简洁、更易维护且更不易出错。

Next.js 15 新增了对 React 编译器 的支持。

安装 babel-plugin-react-compiler：

npm install babel-plugin-react-compiler

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

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

您也可以选择将编译器配置为 "选择性启用" 模式：

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

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

了解更多关于 React 编译器 和 可用的 Next.js 配置选项。

水合错误改进

Next.js 14.1 已对 错误信息和水合错误进行了改进。Next.js 15 在此基础上进一步优化了水合错误视图，现在会显示错误源代码并提供修复建议。

例如，这是 Next.js 14.1 中的水合错误提示：

Next.js 15 RC 已将其改进为：

缓存机制更新

Next.js 应用路由最初采用了预设的缓存默认值，旨在默认提供最佳性能选项，同时允许在需要时选择退出。

根据您的反馈，我们重新评估了 缓存启发式策略 及其与部分预渲染 (PPR) 项目和使用 fetch 的第三方库的交互方式。

在 Next.js 15 中，我们将 fetch 请求、GET 路由处理器和客户端路由缓存的默认行为从"默认缓存"改为"默认不缓存"。如需保留之前的行为，您仍可选择启用缓存。

我们将在未来几个月继续改进 Next.js 的缓存机制，详情将在 Next.js 15 正式版公告中分享。

fetch 请求默认不再缓存

Next.js 使用 Web fetch API 的 cache 选项来配置服务端 fetch 请求与框架持久化 HTTP 缓存的交互方式：

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

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

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

在 Next.js 15 中，如果未提供 cache 选项，则默认使用 no-store。这意味着 fetch 请求默认将不被缓存。

您仍可通过以下方式启用缓存：

• 在单个 fetch 调用中设置 cache 选项 为 force-cache
• 为单个路由设置 dynamic 路由配置选项 为 'force-static'
• 设置 fetchCache 路由配置选项 为 'default-cache'，覆盖布局或页面中所有未显式指定 cache 选项的 fetch 请求

GET 路由处理器默认不再缓存

在 Next.js 14 中，使用 GET HTTP 方法的路由处理器默认会被缓存，除非使用了动态函数或动态配置选项。在 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)——一种在同一个页面上结合静态和动态渲染的优化方案。

目前，除非您使用动态函数（如 cookies()、headers() 和未缓存的数据请求），否则 Next.js 默认使用静态渲染。这些 API 会将整个路由切换为动态渲染。通过 PPR，您可以将任何动态 UI 包裹在 Suspense 边界中。当新请求到达时，Next.js 会立即提供静态 HTML 外壳，然后在同一个 HTTP 请求中渲染并流式传输动态部分。

为了支持逐步采用，我们为特定的布局和页面添加了 experimental_ppr 路由配置选项：

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>
     </>
  };
}

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

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

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

我们将在 Next.js 15 正式版的博客文章中分享更多关于 PPR 的路线图。

了解更多关于部分预渲染的信息。

通过 next/after 在响应后执行代码 (实验性)

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

由于这些任务与响应没有直接关系，用户无需等待它们完成。将工作推迟到响应完成后会带来挑战，因为无服务器函数在响应关闭后会立即停止计算。

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

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

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 }) {
  // 次要任务
  after(() => {
    log();
  });
 
  // 主要任务
  return <>{children}</>;
}

了解更多关于 next/after 的信息。

create-next-app 更新

在 Next.js 15 中，我们为 create-next-app 更新了新的设计。

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

✔ 您希望为 next dev 使用 Turbopack 吗？… 否 / 是

可以使用 --turbo 标志启用 Turbopack。

npx create-next-app@rc --turbo

为了让新项目的启动更加简单，CLI 新增了一个 --empty 标志。这将删除所有多余的文件和样式，生成一个极简的 "hello world" 页面。

npx create-next-app@rc --empty

优化外部包的打包 (稳定版)

打包外部包可以提升应用的冷启动性能。在应用路由器中，外部包默认会被打包，您可以使用新的 serverExternalPackages 配置选项选择性地排除特定包。

在页面路由器中，外部包默认不会被打包，但您可以使用现有的 transpilePackages 选项提供要打包的包列表。使用此配置选项时，您需要逐个指定包。

为了统一应用路由器和页面路由器的配置，我们引入了一个新选项 bundlePagesRouterDependencies，以匹配应用路由器的默认自动打包行为。然后，您可以根据需要使用 serverExternalPackages 排除特定包。

const nextConfig = {
  // 在页面路由器中自动打包外部包：
  bundlePagesRouterDependencies: true,
  // 为应用和页面路由器选择性地排除特定包：
  serverExternalPackages: ['package-name'],
};
 
module.exports = nextConfig;

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

其他变更

• [重大变更] 最低 React 版本现在为 19 RC
• [重大变更] next/image：移除 squoosh，改用 sharp 作为可选依赖项 (PR)
• [重大变更] next/image：将默认 Content-Disposition 更改为 attachment (PR)
• [重大变更] next/image：当 src 包含前导或尾随空格时抛出错误 (PR)
• [重大变更] 中间件：应用 react-server 条件限制不推荐的 React API 导入 (PR)
• [重大变更] next/font：移除对外部 @next/font 包的支持 (PR)
• [重大变更] next/font：移除 font-family 哈希 (PR)
• [重大变更] 缓存：force-dynamic 现在会为 fetch 缓存设置 no-store 默认值 (PR)
• [重大变更] 配置：默认启用 swcMinify (PR)、missingSuspenseWithCSRBailout (PR) 和 outputFileTracing (PR)，并移除已弃用的选项
• [重大变更] 移除对 Speed Insights 的自动检测（现在必须使用专用的 @vercel/speed-insights 包）(PR)
• [重大变更] 移除动态站点地图路由的 .xml 扩展名，并统一开发和生产的站点地图 URL (PR)
• [改进] 元数据：更新了在 Vercel 上托管时 metadataBase 的环境变量回退 (PR)
• [改进] 修复了 optimizePackageImports 中混合命名空间和命名导入时的摇树优化问题 (PR)
• [改进] 并行路由：为未匹配的 catch-all 路由提供所有已知参数 (PR)
• [改进] 配置 bundlePagesExternals 现已稳定并更名为 bundlePagesRouterDependencies
• [改进] 配置 serverComponentsExternalPackages 现已稳定并更名为 serverExternalPackages
• [改进] create-next-app：新项目默认忽略所有 .env 文件 (PR)
• [文档] 改进身份验证文档 (PR)
• [文档] @next/env 包 (PR)

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

贡献者

Next.js 是 3,000 多名独立开发者、Google 和 Meta 等行业合作伙伴以及 Vercel 核心团队共同努力的成果。此版本由以下人员共同打造：

• Next.js 团队：Andrew、Balazs、Ethan、Janka、Jiachi、Jimmy、JJ、Josh、Sam、Sebastian、Sebbie、Shu、Steven、Tim、Wyatt 和 Zack。
• Turbopack 团队：Alex、Benjamin、Donny、Leah、Maia、OJ、Tobias 和 Will。
• Next.js 文档：Delba、Steph、Michael、Anthony 和 Lee。

特别感谢 @devjiwonchoi、@ijjk、@Ethan-Arrowood、@sokra、@kenji-webdev、@wbinnssmith、@huozhi、@domdomegg、@samcx、@Jaaneek、@evanwinter、@wyattjoh、@kdy1、@balazsorban44、@feedthejim、@ztanner、@ForsakenHarmony、@kwonoj、@delbaoliveira、@stipsan、@leerob、@shuding、@xiaohanyu、@timneutkens、@dvoytenko、@bobaaaaa、@bgw、@gaspar09、@souporserious、@unflxw、@kiner-tang、@Ehren12、@EffectDoplera、@IAmKushagraSharma、@Auxdible、@sean-rallycry、@Jeffrey-Zutt、@eps1lon、@jeanmax1me、@unstubbable、@NilsJacobsen、@PaulAsjes、@adiguno、@ryan-nauman、@zsh77、@KagamiChan、@steveluscher、@MehfoozurRehman、@vkryachko、@chentsulin、@samijaber、@begalinsaf、@FluxCapacitor2、@lukahartwig、@brianshano、@pavelglac、@styfle、@symant233、@HristovCodes、@karlhorky、@jonluca、@jonathan-ingram、@mknichel、@sopranopillow、@Gomah、@imddc、@notrab、@gabrielrolfsen、@remorses、@AbhiShake1、@agadzik、@ryota-murakami、@rishabhpoddar、@rezamauliadi、@IncognitoTGT、@webtinax、@BunsDev、@nisabmohd、@z0n、@bennettdams、@joeshub、@n1ckoates、@srkirkland、@RiskyMH、@coopbri、@okoyecharles、@diogocapela、@dnhn、@typeofweb、@davidsa03、@imranolas、@lubieowoce、@maxhaomh、@mirasayon、@blvdmitry、@hwangstar156、@lforst、@emmerich、@christian-bromann、@Lsnsh、@datner、@hiro0218、@flybayer、@ianmacartney、@ypessoa、@ryohidaka、@icyJoseph、@Arinji2、@lovell、@nsams、@Nayeem-XTREME、@JamBalaya56562、@Arindam200、@gaojude、@qqww08、@todor0v、@coltonehrman 和 @wiesson 的帮助！