Next.js 11 | Next.js 框架

正如我们在Next.js Conf上宣布的那样，我们创建最佳开发体验的使命仍在继续，Next.js 11带来：

一致性：一个提供精心设计的解决方案以支持最佳用户体验的系统。
性能改进：进一步优化以改善冷启动时间，让您可以更快地开始编码。
next/script：自动优先加载第三方脚本以提高性能。
next/image：通过自动尺寸检测和支持模糊占位符，减少布局偏移并创建更流畅的视觉体验。
Webpack 5：现在为所有 Next.js 应用程序默认启用，为所有 Next.js 开发者带来这些好处。
Create React App 迁移（实验性）：自动将 Create React App 转换为 Next.js 兼容。
Next.js Live（预览版）：在浏览器中与您的团队实时编码。

立即运行 npm i next@latest react@latest react-dom@latest 进行更新，并参考下面的迁移指南。

性能改进

自 Next.js 10 以来，我们一直致力于进一步改善 Next.js 的开发者体验。在10.1和10.2中，我们将启动时间提高了 24%，并通过 React Fast Refresh 将更改的处理时间缩短了 40%。您只需更新 Next.js 即可获得这些惊人的速度提升。

Next.js 11 包含了 Babel 的另一个优化，以进一步减少启动时间。我们为 webpack 创建了一个全新的 Babel loader 实现，优化了加载并添加了一个内存中的配置缓存层。实际上，这意味着对开发者而言没有变化，但最终会带来更快的开发体验。

脚本优化

新的 Next.js Script 组件是一项基础优化，它使开发人员能够设置第三方脚本的加载优先级，从而节省开发人员时间并提高加载性能。

网站通常需要第三方服务来处理分析、广告、客户支持小部件和同意管理等事宜。然而，这些脚本往往会严重影响加载性能，并可能降低用户体验。开发人员常常难以决定将它们放置在应用程序的何处以实现最佳加载。

使用 next/script，您可以定义 strategy 属性，Next.js 将自动优先处理它们以提高加载性能

beforeInteractive：用于需要在页面可交互之前获取和执行的关键脚本，例如机器人检测和同意管理。这些脚本从服务器注入到初始 HTML 中，并在自捆绑 JavaScript 执行之前运行。
afterInteractive（默认）：用于可在页面可交互之后获取和执行的脚本，例如标签管理器和分析。这些脚本在客户端注入，并在水合作用后运行。
lazyOnload：用于可在空闲时间等待加载的脚本，例如聊天支持和社交媒体小部件。

<Script
  src={url}
  strategy="beforeInteractive" // lazyOnload, afterInteractive
/>

您还可以在加载后运行代码。例如，您可以等到用户回答同意后才执行代码。

<Script
  src={url} // consent mangagement
  strategy="beforeInteractive"
  onLoad={() => {
    // If loaded successfully, then you can load other scripts in sequence
  }}
/>

我们还将 Next.js 11 中脚本的默认加载体验从预加载和 async 更改为 defer。第三方脚本通常与优先级更高的资源（如 CSS、字体和图像）竞争。相对于这些资源以及其他脚本，维护正确的加载顺序给开发人员带来了不必要的负担。

通过提供一个默认加载策略为 afterInteractive 的脚本组件，开发人员现在拥有了最佳性能的更好默认值，同时仍然可以根据需要选择 beforeInteractive。

要了解有关更改默认设置背后的技术选择的更多信息，请查看 RFC 和 Google Chrome 团队的预加载挑战。

图像改进

我们很高兴分享 next/image 组件中社区最常请求的两个功能，以减少累计布局偏移并创建更流畅的视觉体验。

自动尺寸检测（本地图片）

使用 import 关键字作为图像 src 来自动为静态图像定义 width 和 height。

例如，使用内置的 Image 组件现在甚至更容易

import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // When importing the image as the source, you
    // don't need to define `width` and `height`.
    <Image src={author} alt="Picture of the author" />
  );
}

图片占位符

next/image 现在支持模糊占位符，以缓解从空白空间到图像的过渡，并减少感知加载时间，特别是对于互联网连接较慢的用户。

要使用模糊占位符，请将 placeholder="blur" 添加到您的图像中。

<Image src={author} alt="Picture of the author" placeholder="blur" />

Next.js 还支持通过允许您提供自定义 blurDataURL 来模糊动态图像，该 URL 由您的后端提供。例如，您可以在服务器上生成一个 blurha.sh。

<Image
  src="https://nextjs.net.cn/static/blog/next-11/learn.png"
  blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
  alt="Picture of the author"
  placeholder="blur"
/>

Webpack 5

在 Next.js 10.2 中，我们将 webpack 5 的推广范围扩展到所有没有在其 next.config.js 中进行自定义 webpack 配置的应用程序。今天，我们将 webpack 5 设为所有 Next.js 应用程序的默认配置，这将提供各种功能和改进。

我们与社区密切合作，确保平稳过渡到 webpack 5，超过 3400 个现有 Next.js 集成测试在每个拉取请求上都启用了 webpack 5 运行。

如果您的应用程序有自定义的 webpack 配置，我们建议您遵循webpack 5 的升级文档。如果您遇到任何问题，请与我们分享反馈。

Next.js Live 是我们使命的延续，旨在使开发不仅更快、更愉快，而且最重要的是更具包容性，惠及整个组织。通过利用 ServiceWorker、WebAssembly 和 ES Modules 等尖端技术，Next.js Live 将整个开发过程置于 Web 浏览器中。这带来了诸多可能性，例如通过 URL 即时协作和共享，无需构建步骤。对于开发人员而言，这意味着更快的反馈循环，更少的构建等待时间，以及在浏览器中实时进行结对编程和编辑。

要了解更多关于 Next.js Live 以及如何将其与 Vercel 的实时协作引擎结合使用，请参阅文档的Next.js Live部分。

升级指南

Next.js 11 引入了一些破坏性更改，这些更改不应影响大多数用户。这些遗留功能多年来一直以向后兼容的方式维护，有些甚至可以追溯到 v4.0。

移除这些功能是为了减小打包大小并确保代码库在未来可维护。要了解有关从版本 10 升级到 11 的更多信息，请参阅升级指南。

在 Next.js 11 中，最低 React 版本已更新为 17.0.2。请参阅React 17 博客文章了解更多详情。我们还与 React 团队密切合作，他们正在推出React 18。当使用 React 18 alpha 时，Next.js 11 使用 createRoot。

社区

Next.js 是由超过 1600 名独立开发者、Google 和 Facebook 等行业合作伙伴以及我们的核心团队共同努力的成果。

我们很自豪地看到社区持续壮大。仅在过去六个月中，Next.js 在 NPM 上的下载量就增长了 50%，从 410 万次增加到 620 万次，Alexa 全球前 10000 名网站中使用 Next.js 的主页数量也增长了 50%。

本次发布得到了以下贡献者的支持：@kahy9、@ljosberinn、@leerob、@kettanaito、@thomasboyt、@hussainanjar、@styfle、@devknoll、@LiuuY、@timneutkens、@housseindjirdeh、@PepijnSenders、@janicklas-ralph、@payapula、@tmtk75、@ijjk、@hiramhuang、@daku10、@atcastle、@matamatanot、@pelhage、@Lukazovic、@Mzaien、@gleich、@geshan、@Munawwar、@ykzts、@vitalybaev、@mottox2、@vvo、@chrisneven、@turneand、@d3lm、@akellbl4、@sokra、@johnjago、@alicanyildirim、@sanathusk、@valse、@samrobbins85、@SamVerschueren、@ademilter、@ctjlewis、@brandondc741、@eltociear、@martpie、@kasipavankumar、@joecohens、@alexbrazier、@jamsinclair、@fabianishere、@rokinsky、@msidqi、@rubensdemelo、@Simply007、@bradlc、@SinimaWath、@rgabs、@darshkpatel、@sumanthratna、@shuding、@prophet1996、@Joonpark13、@tremby、@stefanprobst、@dopt、@rishabhpoddar、@aydinkn、@ErfanMirzapour、@tubbo、@frontendtony、@eric-burel、@iker-barriocanal、@eps1lon、@Gigiz、@mplis、@HaNdTriX 和 @jigsawye。

以下功能在 Next.js Conf 中提及，但已通过版本10.1和10.2提前发布

自动 Web 字体优化：通过内联字体 CSS 提高性能。
更快的刷新：刷新速度提高 100 毫秒至 200 毫秒。
next/image 改进：支持 Apple Silicon (M1)，以及更多布局和加载器选项。
Next.js Commerce Shopify 集成：用于可组合电子商务应用程序的灵活数据层。Next.js Commerce 目前支持 Shopify、BigCommerce、Saleor、Swell 和 Vendure。