Next.js App Router 更新

App Router 代表了 Next.js 未来的新基础，但我们认识到仍有机会改进用户体验。我们想在此更新我们目前的优先事项。

在即将发布的 Next.js 版本中，我们将专注于以下领域：

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

App Router

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

超越 Pages Router，与 React 对齐

随着我们看到 Next.js 的采用率不断提高，以及使用 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，概述了我们使路由和布局更加灵活的计划。
• 早期 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 应用程序将看到快速刷新速度的持续提升，即使应用程序规模不断增长。

  在过去的几个月中，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 服务器组件。

• 服务器 Actions (Alpha)：服务器 Actions 支持服务器端数据突变、减少客户端 JavaScript 和渐进增强的表单。我们尚不建议在生产环境中使用服务器 Actions。我们感谢 alpha 测试人员的早期反馈，这有助于我们塑造此功能的未来。

感谢您

感谢你们中的许多人选择学习和使用 Next.js 构建项目。

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

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