Back返回博客

Next.js 15 候选版本 2 (RC2)

Next.js 15 第二个候选版本 (RC) 现已发布。此版本允许您在即将发布的稳定版前测试最新功能。

五月份发布 首个 Next.js 15 候选版本后,我们根据您的反馈准备了第二个候选版本。以下是主要更新内容:

立即尝试 Next.js 15 候选版本 (RC2):

# 使用新版自动化升级 CLI
npx @next/codemod@canary upgrade rc
 
# 或手动升级
npm install next@rc react@rc react-dom@rc

注意: 此候选版本包含 上一个 RC 的所有变更。

使用 codemod CLI 实现平滑升级

每个 Next.js 主要版本都包含自动化代码转换工具 (codemods) 来帮助升级破坏性变更。

我们发布了增强版 codemod CLI 使升级更顺畅:

npx @next/codemod@canary upgrade rc

该工具可帮助您将代码库升级至最新稳定版或预发布版本。CLI 会更新依赖项,显示可用 codemods 并指导您应用它们。命令行中指定的分发标签 (@rc@canary 等) 决定升级目标版本。

了解更多关于 Next.js codemods

开发环境 Turbopack

Turbopack 将在 Next.js 15 正式版中成为稳定的本地开发工具(仍为可选功能)。立即通过以下命令体验:

next dev --turbo

感谢数千名开发者在测试阶段反馈问题,自首个候选版本以来我们已解决 54 个 GitHub 问题。通过社区协作及在 vercel.comv0.devnextjs.org 的内部测试,我们实现了多项改进。

过去三个月我们重点优化了冷编译性能,相比前一版本:

  • 内存使用减少 25–35%
  • 包含数千个模块的大型页面编译速度提升 30–50%

未来版本将继续优化这些方面。

Turbopack 团队在持久化缓存、内存优化和 next build 支持方面取得重大进展——测试通过率达 96%

注意: 查看 Turbopack 支持与不支持的功能

异步请求 API(破坏性变更)

传统服务端渲染中,服务器需等待请求后才开始渲染内容。但实际上并非所有组件都依赖请求数据,理想情况下服务器应在请求到达前完成尽可能多的准备工作。为此我们需要明确何时需要等待请求。

因此,我们将依赖请求数据的 API(如 headerscookiesparamssearchParams)改为异步调用:

import { cookies } from 'next/headers';
 
export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
 
  // ...
}

这是破坏性变更,影响以下 API:

  • cookies
  • headers
  • draftMode
  • layout.jspage.jsroute.jsdefault.jsgenerateMetadatagenerateViewport 中的 params
  • page.js 中的 searchParams

为便于迁移,这些 API 暂时支持同步访问,但会在开发和生产环境显示警告直到下个主要版本。我们提供 codemod 自动迁移:

npx @next/codemod@canary next-async-request-api .

若 codemod 无法完全迁移,请参阅 升级指南。我们还提供了 迁移示例

服务端操作安全增强

服务端操作 是通过添加 'use server' 指令定义的服务器端函数,可从客户端调用。

即使某些服务端操作未被代码引用,它们仍是公开的 HTTP 端点。为提升安全性,我们引入以下改进:

  • 无用代码消除:未使用的服务端操作不会暴露其 ID 至客户端 JavaScript 包
  • 安全操作 ID:Next.js 现在生成不可预测的随机 ID,并定期重新计算增强安全性
// app/actions.js
'use server';
 
// 此操作被使用,Next.js 会生成安全 ID
export async function updateUserAction(formData) {}
 
// 此操作未被使用,构建时自动移除
export async function deleteUserAction(formData) {}

仍需将服务端操作视为公开 HTTP 端点。了解更多关于 安全实践

静态路由指示器

开发期间新增静态路由视觉标识,帮助区分静态/动态路由:

也可通过 next build 输出查看所有路由的渲染策略。

此功能可禁用,详见 静态路由指示器文档

<Form> 组件

<Form> 组件扩展了 HTML <form> 元素,支持 预加载客户端导航 和渐进增强:

import Form from 'next/form';
 
export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">提交</button>
    </Form>
  );
}

特性包括:

  • 预加载:表单进入视口时预加载布局和加载状态
  • 客户端导航:提交时保留共享布局和客户端状态
  • 渐进增强:JavaScript 未加载时仍支持整页导航

了解更多关于 <Form> 组件

支持 next.config.ts

现支持 TypeScript 格式的 next.config.ts 配置文件,并提供 NextConfig 类型实现自动补全和类型安全:

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  /* 配置选项 */
};
 
export default nextConfig;

了解更多关于 TypeScript 支持

instrumentation.js(稳定版)

instrumentation 文件的 register() API 现为稳定功能,可用于监控服务器性能、追踪错误来源,并与 OpenTelemetry 等可观测性工具深度集成。移除 experimental.instrumentationHook 配置选项。

新增 onRequestError 钩子(与 Sentry 合作设计),用于捕获服务端错误上下文:

export async function onRequestError(err, request, context) {
  await fetch('https://...', {
    method: 'POST',
    body: JSON.stringify({ message: err.message, request, context }),
    headers: { 'Content-Type': 'application/json' },
  });
}
 
export async function register() {
  // 初始化可观测性 SDK
}

了解 onRequestError 函数 详情。

开发与构建改进

服务端组件热更新

优化了服务端组件的热更新机制,现在会复用之前渲染的 fetch 响应,减少不必要的 API 调用。

App Router 静态生成加速

优化了静态生成流程:

  • 取消二次渲染,复用首次渲染结果
  • 静态生成工作线程间共享 fetch 缓存

了解更多关于 服务端组件 HMR 缓存

高级静态生成控制(实验性功能)

我们新增了实验性支持,为需要更精细控制的进阶使用场景提供对静态生成过程的增强管理能力。

除非有特定需求,否则建议保持当前默认设置,因为这些选项可能因并发量增加而导致资源消耗上升及潜在的内存不足错误。

const nextConfig = {
  experimental: {
    // Next.js 在构建失败前会重试失败的页面生成次数
    staticGenerationRetryCount: 1,
    // 每个工作线程处理的页面数量
    staticGenerationMaxConcurrency: 8,
    // 启动新导出工作线程所需的最小页面数
    staticGenerationMinPagesPerWorker: 25
  },
}
 
export default nextConfig;

了解更多关于静态生成选项

自托管改进

在自托管应用时,您可能需要更精细地控制 Cache-Control 指令。

一个常见场景是控制 ISR 页面发送的 stale-while-revalidate 周期。我们实现了两项改进:

  1. 现在可通过 next.config 配置 expireTime 值(原为 experimental.swrDelta 选项)
  2. 将默认值更新为一年,确保大多数 CDN 能完整应用预期的 stale-while-revalidate 语义

我们也不再使用默认值覆盖自定义的 Cache-Control 值,从而提供完全控制权并确保与任何 CDN 配置的兼容性。

最后,我们改进了自托管时的图片优化功能。此前建议手动安装 sharp 来优化 Next.js 服务器上的图片,但这一建议常被忽视。从 Next.js 15 开始,使用 next start独立输出模式运行时,Next.js 将自动启用 sharp 而无需手动安装。

查看我们关于自托管 Next.js 的新演示教程视频了解更多。

ESLint 9 支持

随着 ESLint 8 在 2024 年 10 月 5 日终止维护,Next.js 15 现已支持 ESLint 9

为确保平稳过渡,Next.js 保持向后兼容性,您可继续使用 ESLint 8 或 9。

若升级至 ESLint 9 且检测到尚未采用新配置格式,Next.js 将自动应用 ESLINT_USE_FLAT_CONFIG=false 逃生舱机制以简化迁移。

运行 next lint 时,—ext—ignore-path 等废弃选项将被移除。请注意 ESLint 10 将最终禁用这些旧配置,建议尽快开始迁移。

查看迁移指南了解详情。

本次更新还升级了 eslint-plugin-react-hooksv5.0.0,新增了 React Hooks 使用规则。所有变更详见 [email protected] 更新日志

其他变更

  • 包含 RC 1 博客文章所述的所有变更
  • [重大变更] 弃用应用路由中的 export const runtime = "experimental-edge",现应改用 export const runtime = "edge"。我们提供了代码迁移工具PR
  • [重大变更] 在渲染过程中调用 revalidateTagrevalidatePath 现在会抛出错误(PR
  • [重大变更] instrumentation.jsmiddleware.js 文件现在使用内置 React 包(PR
  • [重大变更] 最低 Node.js 版本要求提升至 18.18.0(PR
  • [重大变更] next/dynamic:已移除废弃的 suspense 属性,在应用路由中使用时不再插入空 Suspense 边界(PR
  • [重大变更] 在边缘运行时解析模块时,不再应用 worker 模块条件(PR
  • [重大变更] 禁止在服务端组件中将 ssr: false 选项与 next/dynamic 联用(PR
  • [改进] outputFileTracingRootoutputFileTracingIncludesoutputFileTracingExcludes 已结束实验状态转为稳定功能(PR
  • [改进] 避免将全局 CSS 文件与深层树结构中的 CSS 模块文件合并(PR
  • [改进] 现在可通过 NEXT_CACHE_HANDLER_PATH 环境变量指定缓存处理器(PR
  • [改进] 页面路由现在同时支持 React 18 和 19(PR
  • [改进] 错误覆盖层现在在检查器启用时会显示复制 Node.js 检查器 URL 的按钮(PR
  • [改进] 应用路由的客户端预取现在使用 priority 属性(PR
  • [改进] 新增 unstable_rethrow 函数用于在应用路由中重新抛出 Next.js 内部错误(PR
  • [改进] unstable_after 现在可用于静态页面(PR
  • [改进] 在 SSR 期间使用 next/dynamic 组件时会预加载 chunk(PR
  • [改进] 应用路由现在支持 esmExternals 选项(PR
  • [改进] 新增 experimental.allowDevelopmentBuild 选项允许在调试时使用 NODE_ENV=development 运行 next buildPR
  • [改进] 页面路由中现已禁用服务端操作转换(PR
  • [改进] 构建工作线程退出时不再导致构建挂起(PR
  • [改进] 从服务端操作重定向时,重新验证现在会正确应用(PR
  • [改进] 边缘运行时现在能正确处理并行路由的动态参数(PR
  • [改进] 静态页面现在会在初始加载后遵守 staleTime(PR
  • [改进] 更新 vercel/og 修复内存泄漏问题(PR
  • [改进] 调整补丁时间以支持 msw 等 API 模拟工具(PR

贡献者

Next.js 是 3,000 多名独立开发者与 Vercel 核心团队共同协作的成果。本版本由以下成员共同打造:

特别感谢(完整贡献者名单略)所有协助者的鼎力支持!