Next.js App Router 更新

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，从那时起就一直在稳步发布新功能和改进。

• 首次发布：当年 5 月，我们发布了一个 RFC，概述了我们使路由和布局更灵活的计划。
• 早期 Beta 版：在 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 构建在一个低级别的增量计算引擎上，该引擎支持缓存到单个函数级别。

  迁移到 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 函数 的性能和内存使用，确保最小的冷启动，同时保留可扩展无服务器架构的优势。这项工作促成了 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 Server Components。

• 服务器操作（Alpha）：服务器操作支持服务器端数据修改、减少客户端 JavaScript 和逐步增强表单。我们目前不建议在生产环境中使用服务器操作。我们感谢 Alpha 测试人员提供早期反馈，帮助我们塑造此功能的未来。

感谢您

我们感谢许多人选择学习并使用 Next.js 进行构建。

我们对性能、稳定性和开发者体验的关注将体现在即将发布的 Next.js 版本中。我们希望使用 Next.js 令人愉快，并让您（和您的团队）更高效。

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