Next.js 应用路由更新

应用路由代表了 Next.js 未来发展的新基础，但我们也认识到有机会让体验变得更好。我们想更新一下我们目前的优先事项。

在即将发布的 Next.js 版本中，我们将重点关注以下领域

• 提升性能
• 提升稳定性
• 提升开发者教育

应用路由

首先，提供一些关于应用路由设计方式的背景信息很有帮助。

通过与 React 对齐超越页面路由

随着 Next.js 使用率的提高以及越来越多的大型应用程序使用 Next.js 构建，我们收到了来自社区的反馈，并发现了一些我们开始触及页面路由限制的领域。

最值得注意的是，Next.js 页面路由并非为流式传输而设计，流式传输是现代 React 中一项基石式的原语，它可以帮助我们解决我们面临的限制，并实现我们对 Next.js 的长期愿景。

创建对数据获取、资产加载和页面元数据友好的流式框架 API，以及利用 React 的更新原语，需要对 Next.js 的核心架构进行重大更改。

我们借此机会在 最新的 React 并发特性（如服务器组件、Suspense 等）之上构建，这些特性已被 设计用于流式架构。

增量采用不可协商

我们不希望我们的社区不得不从头开始重建他们的整个应用程序以更新到最新版本的 Next.js。我们认为增量采用是随着时间推移发展应用程序的最佳策略。

• 按路由增量迁移：无需对应用程序进行重大重写，您可以将应用程序的单个路由迁移到应用路由，并开始按照自己的节奏利用新功能。请参阅我们的 增量采用指南 或 观看教程。
• 轻松回滚：如果您对应用路由的性能或开发者体验不满意，可以轻松回滚到该特定路由的页面路由。

我们正在探索进一步简化增量采用的机会。

通往稳定之路

我们在一年前开始构建 Next.js 应用路由，并从那时起一直在稳步发布新功能和改进。

• 初始公告：在那一年 5 月，我们 发布了一个 RFC 来概述我们使路由和布局更灵活的计划。
• 早期 Beta 版本：在 Next.js 13 中，我们发布了应用路由的第一个版本，允许社区试用并提供早期反馈。
• 稳定 API：针对反馈，我们将工作重点放在最终确定核心 API 上。在 13.4 中，我们将应用路由的核心 API 标记为稳定并准备用于更广泛的采用。

我们目前的工作重点

标记稳定性向社区表明核心 API 已确定，并且不会发生需要重写的大规模重大更改。

从那时起，我们收到了很多宝贵的反馈，并且使用率的提高不可避免地发现了错误以及进一步改进的机会。

我们想让您知道，我们尚未满意使用应用路由的体验，并且这是我们未来最优先考虑的事情。因此，让我们谈谈我们正在做哪些工作来改善这种体验。

提升性能

在未来几个月，我们将重点关注性能的三个方面：本地迭代速度、生产构建时间和无服务器性能。

本地开发性能

随着 Next.js 的发展以及使用它构建的应用程序规模的增长，我们一直在缓慢而逐步地用更快、更具可扩展性的工具替换其底层架构的部分内容。

• 迁移进展：我们首先用 SWC 替换了 Babel （编译）和 Terser （压缩）。这有助于提高本地迭代速度和生产构建时间。

• 长期投资：无论应用程序规模如何，保持出色的快速刷新性能意味着在本地开发过程中使 Next.js 尽可能地增量化，仅在需要时捆绑和编译代码。

  这就是我们目前正在努力用 Turbopack 替换 webpack (打包) 的原因，Turbopack 基于底层的增量计算引擎，可以将缓存级别细化到单个函数。

  迁移到 Turbopack 的 Next.js 应用程序，即使规模不断扩大，也能持续提升快速刷新速度。

  在过去的几个月里，Turbo 团队一直专注于提升 Turbopack 的性能，并支持所有 Next.js 功能和 App Router API。

  Turbopack 目前处于 beta 测试阶段 (next dev --turbo)。

• 改进现有架构：除了投资未来外，我们还在持续改进现有的 webpack 架构性能。

  对于某些 Next.js 应用程序，尤其是那些刷新数千个模块的应用程序，我们收到了关于本地开发和快速刷新不稳定的报告。我们正在努力提升这方面的性能和可靠性。例如，我们最近添加了预配置设置 (modularizeImports) 来处理 大型图标库，这些库可能会意外地导致每次请求都重新加载数千个模块。

构建时性能

我们还在开发使用 Turbopack 的生产构建 (next build --turbo)，并且已经 开始落地 这项工作的首批成果。期待在接下来的版本中获得更多更新。

生产环境性能

最后，在 Vercel 上，我们正在努力优化 Vercel 函数的性能和内存使用，这些函数 通过 Next.js 应用程序代码定义，确保在保持可扩展无服务器架构优势的同时最大程度减少冷启动。这项工作已在 Next.js 中带来新的 跟踪功能（实验性）并初步探索了服务器端开发者工具。

提升稳定性

Pages Router 已经存在六年了。App Router 的发布引入了新的 API，这些 API 仍然很年轻，只有六个月的使用时间。我们在短时间内取得了长足的进步，但随着我们从社区了解到更多关于他们如何使用它的信息，我们仍然有机会进行改进。

我们感谢社区积极采用 App Router 并提供反馈。我们正在调查大量错误报告，并感谢您创建的最小可重现示例，这有助于隔离问题并验证修复程序。

从 13.4 版本开始，我们已经修复了许多关于稳定性的高影响性错误，这些修复程序在最新的补丁版本 (13.4.7) 中提供。我们将继续高度关注性能和稳定性。

改进开发者教育

虽然我们认为 App Router 和现代 React 的新功能非常强大，但它们也需要额外的教育和文档来帮助讲解这些新概念。

Next.js 功能

我们在过去一年里一直在努力从头开始重写 Next.js 文档。这项工作现在已在 nextjs.org/docs 上上线。我们想重点介绍一些 重要内容

• Pages 和 App 切换：您可以使用文档左侧的按钮在学习 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 能够带来愉悦的体验，并提高您（以及您的团队）的生产力。

一如既往，我们非常感谢您的反馈。如果您在使用 Next.js 时遇到任何问题，请提交问题，或发起新的讨论，我们将进行调查。