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 中，我们通过 React Fast Refresh 将启动时间提高了 24%，并将更改的处理时间缩短了40%。只需保持 Next.js 更新，您就可以获得这些惊人的速度改进。

Next.js 11 包括对 Babel 的另一项优化，以进一步减少启动时间。我们为 webpack 创建了一个全新的 Babel 加载器实现，优化了加载并添加了内存中配置缓存层。在实践中，这意味着开发人员无需进行任何更改，但最终将意味着更快的开发体验。

脚本优化

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

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

使用 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 的 Script 组件，开发人员现在拥有了更好的默认值以实现最佳性能，并且仍然可以根据需要选择 beforeInteractive。

要了解切换默认值的背后技术选择，请查看 RFC 和 Google Chrome 团队关于预加载的挑战。

图像改进

我们很高兴地分享社区最需要的两个 next/image 组件功能，减少累积布局偏移并创造更流畅的视觉体验。

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

对图像 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/images/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，在每个带有 webpack 5 启用的拉取请求中，都会运行超过 3400 个现有的 Next.js 集成测试。

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

Next.js Live 是我们使命的延续，旨在使开发不仅更快、更愉快，而且至关重要的是 更具包容性。通过利用 ServiceWorker、WebAssembly 和 ES 模块等尖端技术，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 等行业合作伙伴以及我们的核心团队共同努力的结果。

我们很自豪地看到社区继续发展壮大。仅在过去六个月中，我们就在 NPM 上看到了 Next.js 下载量增长了 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 版本中提前发布。

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