Next.js 13提供新的实验性特性，实现App“动态无限制”

2022 年 11 月 10 日 InfoQ

作者｜ Bruno Couriol

译者｜明知山

策划｜丁晓昀

最近，Next.js 大会介绍了 Next.js 13，一个 React App 框架的最新版本。Next.js 13 希望通过提供创新的特性帮助开发人员开发出“动态无限制”的 App，其中许多特性仍处于 alpha 或 beta 阶段。新特性对编译器、路由和渲染基础设施进行了更新，并改进了组件工具包。

Next.js 团队在最近的主题演讲中解释了 Next.js 最新版本背后的逻辑：

Next.js 最初是一个用于构建动态服务器端渲染网站的 React 框架。在设计 Next.js 时，我们没有针对单页应用进行优化，而是考虑帮助开发团队构建复杂的应用程序。但是，动态总是伴随着许多限制。

动态意味着要以高成本、始终在线的基础设施为代价，需要手动配置和大量的运维。

动态也意味着要同时处理两组运行时 API，在服务器端没有 JS，而浏览器端有 Web 标准 API。

你想要变得动态，但通常只在一个单一的区域，其伸缩性取决于遗留、静态和 CDN 缓存。

今天，我们发布了 Next.js 13，让你们能够实现无限制的动态。

新版本对工具包进行了改进（改进的 Link 组件、新的 Image 组件和新的 @next/font 库）。额外的 alpha/beta 版特性提供了未来的服务器端渲染预览，正如 Vercel 所设想的那样。

新的 Image 组件旨在改善用户体验，采用了本地延迟加载，减少了客户端 JavaScript 交付，没有了布局漂移。在开发者体验方面，新组件力求更容易设置样式和配置。

改进后的 Link 组件不再需要一个锚标记（即）作为子元素。现在，下面的锚链接 Next.js 代码是有效的：

// Next.js 13: `<Link>` always renders `<a>`<Link href="/about">  About</Link>

@next/font（在 beta 版中发布）将自动优化字体（包括自定义字体），并删除外部网络请求，以提高隐私性和性能。文档中提到的细节：

@next/font 包含了内置的自动自托管任意字体文件，你可以在零布局漂移的情况下加载网页字体，这要得益于使用了底层的 size-adjust CSS 属性。

Next.js 13 引入了 Turbopack（在 alpha 版中发布），作为基于 Rust 的 Webpack 替代方案，为开发人员带来数量级的速度改进。与之前的 Parcel 一样，Turbopack 可以增量构建和捆绑源文件。Next.js 团队宣称：

Turbopack 只打包开发所需的最小资产文件，因此启动速度非常快。对于一个包含 3000 个模块的应用程序，Turbopack 启动只需要 1.8 秒，而 Vite 耗时 11.4 秒，Webpack 则需要 16.5 秒。

Turbopack 对 Server Component、TypeScript、JSX、CSS 等都提供了开箱即用的支持。

Vite 的作者尤雨溪最近对 Vite 和 Next/Turbo 进行了基准测试。他发现，当使用类似的配置执行基准测试时，二者的速度是相近的。截至本文发布，Vercel 的基准测试方法和结果也已经发布，纠正了一些错误，但这仍然是一个存在争议的话题。

虽然开发者体验的改善得到了许多开发者的积极评价，但一位开发者仍然指出了可能存在的缺点和局限性：

因为存在一个庞大的 Webpack 插件生态系统，这可能会使现有应用程序的迁移变得非常困难。Vercel 可能需要依靠社区的贡献开发某种插件系统，这可能很困难，因为像我这样的 JavaScript 开发人员愚蠢又懒惰，不愿意学习 Rust。

此外，对于大多数项目来说，带有 esbuild 的 Vite 已经足够快了，它提供了无与伦比的开发者体验。

你还应该知道的是，Vercel 有意希望通过在云端远程缓存构建来赚钱。

Next.js 13 还对路由和渲染基础设施进行了重大更改，其中一些直接与 React 核心团队合作，以便更好地利用 React 的 Server Component、Suspense 和流。文档中提到：

新的路由器支持：

1.布局：在路由之间轻松共享 UI，同时保留状态，避免昂贵的重新渲染。

2.Server Component：将服务器优先作为大多数动态应用程序的默认设置。

3.流：渲染时在 UI 单元中显示即时加载状态和流。

4.数据抓取：async 的 Server Component 和扩展的 fetchAPI 支持组件级抓取。

要了解更多细节，可以查看发布说明。虽然有很多开发者对该版本做出了积极的反应，但一位开发者指出：

与如何使用 Server Component 相关的规则可能不直观，也很难理解。React 本来就有过于复杂的负面名声，我不认为这会有带来什么帮助。在同一个代码库中处理客户端 JS 和 Node 运行时已经有点麻烦了，但在旧范式中，至少两端之间只有一个交互点（getServerSideProps/getStaticProps），而现在可以出现在每个组件边界上。

另一名开发者对一些新特性提出了警告：

Next.js 涵盖了 React 团队正在研究的一些实验性的、还不稳定的 React 特性，比如服务器端组件，或者在这些服务器端组件中支持 async/await。因此，Next.js 也包含了 React 的一些未来的概念。但更为重要的是，我们需要知道我们谈论的是不稳定、尚未完成的 API，它们仍在研究和实现当中。因此，当你尝试在 beta 版的文档中搜索如何使用新的 /app 文件夹和构建 Next.js 应用程序的新方法时，你会发现许多关于特性仍然缺失、未完成、可能发生变更等警告和注释。

Next.js 基于 MIT 开源许可。欢迎开发者为 Next.js GitHub 代码库做出贡献，并遵循 Next.js 贡献指南和行为准则。

原文链接：

https://www.infoq.com/news/2022/11/nextjs-13-released/

声明：本文为InfoQ翻译，未经许可禁止转载。

反转！马斯克正在求被裁工程师复职，尤其是Android和iOS开发

苹果暂停除研发外岗位招聘，市值一夜蒸发7160亿元；腾讯和联通合资公司因为云计算；国美停发工资，要求员工签理解承诺书｜Q资讯

阿里巴巴开源下一代云原生网关Higress：基于Envoy，支持Nginx Ingress零成本快速迁移