Next.js 11 | Next.js 框架

正如我们在 Next.js Conf 上宣布的那样，我们致力于创造最佳开发者体验的使命仍在继续，Next.js 11 的特点包括：

一致性 (Conformance)：一个系统，提供精心设计的解决方案以支持最佳用户体验。
性能提升：进一步优化以改善冷启动时间，让您可以更快地开始编码。
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 (默认)：对于可以在页面可交互之后获取和执行的脚本，例如标签管理器和分析。这些脚本在客户端注入，将在水合作用 (hydration) 后运行。
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 的 Script 组件，开发者现在拥有了更好的默认设置以获得最佳性能，并且仍然可以根据需要选择 beforeInteractive。

要了解更多关于切换默认设置背后的技术选择，请查看 RFC 和谷歌 Chrome 团队关于预加载挑战的文档。

图像改进

我们很高兴分享我们的社区对 next/image 组件提出的两个最受欢迎的功能，它们可以减少累积布局偏移 (Cumulative Layout Shift) 并创造更流畅的视觉体验。

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

对图像 src 使用 import 关键字，以自动定义静态图像的 width 和 height。

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

pages/index.js

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。例如，您可以在服务器上生成 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，超过 3,400 个现有的 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 位个人开发者、谷歌和 Facebook 等行业合作伙伴以及我们的核心团队共同努力的成果。

我们很自豪地看到社区持续壮大。仅在过去的六个月中，我们在 NPM 上看到的 Next.js 下载量增长了 50%，从 410 万增长到 620 万，Alexa 排名前 10,000 的主页中使用 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 版本提前发布

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