App Router 代表了 Next.js 未来的新基础,但我们认识到仍有改进空间。在此,我们想分享当前的工作重点。
在接下来的 Next.js 版本中,我们将聚焦以下领域:
- 性能优化
- 稳定性提升
- 开发者教育改进
App Router
首先,有必要说明 App Router 的设计背景。
通过与 React 对齐实现 Pages Router 的超越
随着 Next.js 采用率提升和大型应用构建需求的增加,我们从社区获得反馈并发现 Pages Router 已开始显现局限性。
最显著的是,Next.js Pages Router 并非为流式传输设计——这是现代 React 的核心特性,能帮助我们突破现有局限并实现 Next.js 的长期愿景。
为了实现支持流式传输的框架 API(包括数据获取、资源加载和页面元数据),并充分利用 React 的新特性,我们需要对 Next.js 的核心架构进行重大调整。
我们抓住这个机会,基于 React 最新并发特性(如服务端组件、Suspense 等)进行构建,这些特性专为 流式架构 设计。
渐进式采用不容妥协
我们不希望社区必须彻底重写整个应用才能升级到最新版 Next.js。我们相信渐进式采用是应用演进的最佳策略。
- 按路由渐进迁移:无需大规模重写,您可以逐个迁移应用路由到 App Router,按自己的节奏使用新特性。参阅我们的 渐进式迁移指南 或 观看教程。
- 轻松回滚:如果对 App Router 的性能或开发者体验不满意,您可以轻松回滚到 Pages Router。
我们正在探索更多简化渐进式采用的方案。
稳定性之路
Next.js App Router 的开发始于一年前,此后我们持续发布新特性和改进。
- 初始公告:同年五月,我们发布了 RFC 阐述路由和布局的灵活性改进计划。
- 早期测试版:在 Next.js 13 中发布了 App Router 首个版本,供社区试用并提供早期反馈。
- 稳定 API:根据反馈,我们专注于核心 API 的最终确定。在 13.4 版本中,我们将 App Router 核心 API 标记为稳定,适合广泛采用。
当前工作重点
稳定性标记向社区表明核心 API 已定型,不会出现需要重写的重大变更。
此后,我们收到大量宝贵反馈,采用率提升也暴露出一些缺陷和改进机会。
我们希望您知道,我们对当前 App Router 的使用体验 仍不满意,这是我们的首要任务。下面介绍我们正在进行的改进工作。
性能优化
未来几个月,我们将聚焦三个性能维度:本地迭代速度、生产构建时间和无服务器性能。
本地开发性能
随着 Next.js 成熟和应用规模增长,我们逐步用更快、更可扩展的工具替换底层架构组件。
-
迁移进展:我们首先用 SWC 替换 Babel(编译)和 Terser(压缩),这提升了本地迭代速度和生产构建时间。
-
长期投资:为保持优秀的 Fast Refresh 性能(无论应用规模),我们需要让 Next.js 在本地开发中尽可能增量运行,仅按需打包和编译代码。
因此我们正用 Turbopack(基于底层增量计算引擎构建)替代 webpack(打包),该引擎支持函数级缓存。
迁移到 Turbopack 的 Next.js 应用将获得持续的 Fast Refresh 速度提升(即使规模增长)。
过去几个月,Turbo 团队专注于提升 Turbopack 性能和对所有 Next.js 特性及 App Router API 的支持。
Turbopack 当前处于 测试阶段(
next dev --turbo
)。 -
改进现有架构:在投资未来的同时,我们持续优化现有 webpack 架构。
对于某些 Next.js 应用(特别是需要刷新数千模块的情况),我们收到本地开发和 Fast Refresh 不稳定的报告。我们正在提升这方面的性能和可靠性。例如,最近新增了预配置设置(
modularizeImports
)来处理 大型图标库,避免每次请求意外强制重载数千模块。
构建时性能
我们也在开发基于 Turbopack 的生产构建(next build --turbo
),并已 开始落地 相关工作。后续版本将有更多更新。
生产环境性能
在 Vercel 上,我们正优化 通过 Next.js 应用代码定义 的 Vercel Functions 的性能和内存使用,在保持可扩展无服务器架构优势的同时最小化冷启动时间。这项工作催生了 Next.js 的新 追踪能力(实验性)和服务端开发者工具的早期探索。
提升稳定性
Pages Router 已有六年历史。App Router 的发布引入了仅使用六个月的新 API。我们在短时间内取得长足进步,但仍有改进空间。
我们感谢社区积极采用 App Router 并提供反馈。我们正在调查许多错误报告,感谢您创建的最小复现帮助定位问题和验证修复。
自 13.4 版本以来,我们已修复多个高影响稳定性问题(最新补丁版本 13.4.7
可用)。我们将持续高强度关注性能和稳定性。
改进开发者教育
虽然 App Router 和现代 React 的新特性很强大,但也需要额外的教育和文档来帮助理解这些新概念。
Next.js 特性
过去一年我们重写了 Next.js 文档,现已上线 nextjs.org/docs。重点包括:
- 页面和应用切换:通过文档左侧按钮可在 Pages Router 和 App Router 文档间切换,还可按路由选择过滤搜索结果。
- 改进内容和信息架构:几乎每篇 App Router 文档都已更新,包括更清晰的结构、页面间连贯性,以及数百张新插图直观解释 Next.js 工作原理。
- 更多内容:我们还有工作要做。Vercel 开发者体验团队正努力提供更多学习资源(包括更新
/learn
课程教授 App Router)和真实代码库示例(包括重写 Next.js Commerce)。
新内容将发布在 文档、Twitter、YouTube 等平台。
React 新特性
我们也听到了关于 Next.js App Router 中 React 新特性教育的反馈。
-
服务端组件:需注意像服务端组件和
"use client"
指令 等约定并非 Next.js 特有,而是 React 生态的一部分。我们的团队、Meta 合作伙伴和其他贡献者正努力提供更多相关教育。这些概念虽新,但我们相信 React 生态和 持续教育。
-
客户端组件:近期关于服务端组件的讨论中,需明确客户端组件并非降级优化。客户端是 React 模型的有效部分且不会消失。
您可将客户端组件视为现有 Next.js 生态,您喜爱的库和工具仍可工作。例如,常见问题是是否每个文件都需添加
"use client"
使其成为客户端组件。这并非必要,但我们理解这些新概念需要时间学习。只需 标记顶层边界,即代码从服务端转移到客户端的位置。这种架构允许您 交织服务端和客户端组件。 -
第三方生态增长:除教育外,围绕 React 新特性的生态仍在发展。例如,来自 Chakra UI 团队的 CSS-in-JS 库 Panda CSS 刚宣布支持 React 服务端组件。
-
服务端操作(Alpha):服务端操作 支持服务端数据变更、减少客户端 JavaScript 和渐进增强表单。目前不建议在生产环境使用,感谢 Alpha 测试者的早期反馈帮助我们塑造该特性的未来。
致谢
感谢您选择学习和使用 Next.js 进行构建。
我们对性能、稳定性和开发者体验的关注将体现在未来 Next.js 版本中。我们希望使用 Next.js 是愉快的——并能提升您(和您的团队)的效率。