Next.js App router 更新

1,128 阅读8分钟

App Router 代表了 Next.js 未来的新基础,但我们认识到还有机会改善体验。 我们想提供有关我们当前优先事项的最新信息。 对于即将发布的 Next.js,我们重点关注以下领域:

  • 提高绩效
  • 提高稳定性
  • 改善开发者教育

应用程序路由器

首先,提供一些有关 App Router 设计方式的背景信息会很有帮助。

通过与 React 保持一致,超越页面路由器

随着我们看到 Next.js 的采用率不断提高以及使用 Next.js 构建更大规模的应用程序,我们收到了社区的反馈,并确定了我们开始达到 Pages Router 极限的领域。

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

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

我们借此机会构建了最新的 React 并发功能,如服务器组件、Suspense 等,专为流式架构而设计

增量采用是没有商量余地的

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

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

我们正在探索更多机会,使增量采用变得更加容易。

稳定之路

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

  • 最初的公告:当年 5 月,我们发布了 RFC,概述了我们使布线和布局更加灵活的计划。
  • 早期测试版:在 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 的 Next.js 应用程序将看到快速刷新速度的持续改进,即使它们的大小不断增长。

    在过去的几个月中,Turbo 团队一直致力于提高 Turbopack 的性能以及对所有 Next.js 功能和 App Router API 的支持。

    Turbopack 目前提供测试版next dev --turbo)。

  • 改进当今的架构:除了对未来进行投资之外,我们还将继续对现有的 webpack 架构进行性能改进。

    对于某些 Next.js 应用程序,尤其是那些刷新数千个模块的应用程序,我们已经看到有关本地开发和快速刷新的不稳定的报告。我们正在努力提高性能和可靠性。例如,我们最近添加了预配置设置 ( 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 Router 或 App Router 文档之间进行切换。此外,您可以根据您的路由器选择过滤搜索结果。
  • 改进的内容和信息架构:  App Router 文档的几乎每个页面都已刷新,包括页面之间更清晰的结构和凝聚力,以及数百个新插图以直观地解释 Next.js 的工作原理。
  • 未来还有更多:我们还有更多工作要做。Vercel 的开发人员体验团队正在努力提供额外的学习资源(包括关于教授 App Router 的更新课程/learn)和真实世界代码库示例(包括重写Next.js Commerce))。

我们将在Twitter上发布文档中的新内容YouTube, 和更多。

新的反应特性

我们还听到了您对 Next.js App Router 中提供的新 React 功能的教育反馈。

  • 服务器组件:值得注意的是,服务器组件等功能和指令等"use client"约定不是 Next.js 特有的,而是 React 生态系统的很大一部分。

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

  • 客户端组件:随着最近围绕服务器组件的讨论,重要的是要注意客户端组件并不是去优化的。客户端是 React 模型的有效部分,并且不会消失。

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

  • 不断发展的第三方生态系统:除了教育之外,围绕 React 新功能的生态系统仍在不断发展。例如,熊猫 CSS是 Chakra UI 制造商的 CSS-in-JS 库,刚刚宣布支持 React 服务器组件。

  • 服务器操作(Alpha)服务器操作支持服务器端数据突变、减少客户端 JavaScript 并逐步增强表单。我们还不建议在生产中使用服务器操作。我们感谢 alpha 测试人员的早期反馈,帮助我们塑造此功能的未来。

原文链接: nextjs.org/blog/june-2…