Next.js App Router 更新

App Router 代表了 Next.js 未来的新基础，但我们认识到仍有机会改进用户体验。我们想向大家介绍一下我们目前的优先事项。

在即将发布的 Next.js 版本中，我们将专注于以下几个方面：

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

App Router

首先，提供一些关于 App Router 如何设计的背景信息会很有帮助。

通过与 React 对齐，超越 Pages Router

随着 Next.js 的采用率提高以及使用 Next.js 构建的大型应用程序增多，我们收到了社区的反馈，并确定了我们开始触及 Pages Router 限制的领域。

最值得注意的是，Next.js Pages Router 不是为流式处理而设计的，而流式处理是现代 React 中的一个基石原语，它可以帮助我们解决面临的限制，并实现我们对 Next.js 的长期愿景。

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

我们借此机会构建于最新的 React 并发特性之上，例如 Server Components、Suspense 等，这些特性是为流式架构设计的。

增量采用势在必行

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

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

我们正在探索进一步的机会，使增量采用更加容易。

迈向稳定之路

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

• 初步公告：在那一年的五月，我们发布了一个 RFC，概述了我们使路由和布局更灵活的计划。
• 早期 Beta 版：在 Next.js 13 中，我们发布了 App Router 的第一个版本，允许社区试用并提供早期反馈。
• 稳定 API：为了响应反馈，我们专注于最终确定核心 API。在 13.4 版本中，我们将 App Router 的核心 API 标记为稳定，并准备好更广泛地采用。

我们目前的重点

标记稳定性向社区表明，核心 API 已经确定，不会进行需要重写的重大破坏性更改。

从那时起，我们收到了许多宝贵的反馈，并且采用率的提高不可避免地揭示了错误和进一步改进的机会。

我们想让您知道，我们对 App Router 的使用体验仍然不满意，并且这是我们前进的首要任务。因此，让我们来谈谈我们正在为改善这种体验所做的工作。

提升性能

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

本地开发性能

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

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

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

  这就是为什么我们目前正在用 Turbopack替换 webpack （捆绑），Turbopack 构建在低级增量计算引擎之上，该引擎支持缓存到单个函数的级别。

  迁移到 Turbopack 的 Next.js 应用程序即使规模扩大，Fast Refresh 速度也将持续提高。

  在过去的几个月中，Turbo 团队一直专注于改进 Turbopack 的性能以及对所有 Next.js 功能和 App Router API 的支持。

  Turbopack 目前以 beta 版提供（next dev --turbo）。

• 改进今天的架构：除了投资未来之外，我们还在继续对现有的 webpack 架构进行性能改进。

  对于某些 Next.js 应用程序，特别是那些刷新数千个模块的应用程序，我们已经看到关于本地开发和快速刷新不稳定性的报告。我们正在努力改进这里的性能和可靠性。例如，我们最近添加了预配置设置 (modularizeImports) 来处理大型图标库，这些库可能会意外地强制数千个模块在每次请求时重新加载。

构建时性能

我们还在使用 Turbopack (next build --turbo) 进行生产构建，并且开始着手这项工作的最初部分。期待在即将发布的版本中获得更多关于这方面的更新。

生产性能

最后，在 Vercel 上，我们正在努力优化 Vercel Functions 的性能和内存使用率，这些 Functions 是通过 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 功能的教育方面的反馈。

• Server Components：重要的是要注意，像 Server Components 这样的功能以及像 "use client" 指令这样的约定不是 Next.js 特有的，而是 React 生态系统中更大部分的一部分。

  我们的团队、我们在 Meta 的合作伙伴以及其他独立贡献者正在努力提供更多关于这些主题的教育。这些概念还处于早期阶段，但我们对 React 生态系统和持续教育充满信心。

• Client Components：随着最近关于 Server Components 的讨论，重要的是要注意客户端组件不是一种反优化。客户端是 React 模型的一个有效组成部分，并且不会消失。

  您可以将客户端组件视为当今现有的 Next.js 生态系统，您最喜欢的库和工具可以在其中继续工作。例如，我们看到的一个常见问题是，是否需要在每个文件中添加 "use client" 以使其成为客户端组件。这是不必要的，但我们理解这些概念是新的，需要时间来学习。您只需要标记代码在服务器和客户端之间移动的顶层边界。这种架构允许您将服务器和客户端组件交织在一起。

• 不断发展的第三方生态系统：除了教育之外，围绕 React 新功能的生态系统仍在发展。例如，来自 Chakra UI 制造商的 CSS-in-JS 库 Panda CSS刚刚宣布支持 React Server Components。

• Server Actions（Alpha 版）：Server Actions 实现了服务器端数据突变、减少客户端 JavaScript 以及渐进增强的表单。我们尚不建议在生产环境中使用 Server Actions。感谢 alpha 测试人员的早期反馈，帮助我们塑造此功能的未来。

感谢您

感谢大家选择学习和使用 Next.js 进行构建。

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

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