Next.js 11

正如我们在 Next.js 大会上宣布的，Next.js 11 延续了我们打造最佳开发者体验的使命，主要特性包括：

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

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

规范性 (Conformance)

即使框架提供了出色的工具和自动优化，网站所有者和应用开发者仍常被要求成为用户体验质量（如性能、安全性和可访问性）方面的专家。随着功能增加和团队扩大，开发者需要转变思维方式。

通过构建搜索和地图等大规模网络应用的经验，谷歌证明了框架在团队和应用扩展过程中对保持质量的关键作用。通过利用强默认值和保障措施的系统，他们让开发者能更专注于功能和产品。

如今，谷歌的 Web 平台团队已开始通过 Next.js 的规范性系统 开源其系统。

规范性 是一个提供精心设计解决方案和规则的系统，以支持最佳加载和核心 Web 指标，未来还将增加对安全性和可访问性等其他质量方面的支持。这些解决方案让您的团队无需记忆所有最佳加载性能的最新规则，同时仍能灵活地为应用做出正确选择。

除了许多基于性能研究的基础优化外，Next.js 11 现在默认支持 ESLint，使开发过程中更容易发现框架特定问题，并为团队设定指南以确保最佳实践，即使规模扩大。

要开始使用 ESLint，请在升级到 Next.js 11 后运行 npx next lint。ESLint 集成适用于新的和现有的 Next.js 应用，提供一套新规则帮助开发者构建更好的应用。

$ npx next lint
我们为您创建了 .eslintrc 文件并包含了基础的 Next.js ESLint 配置。
 
./pages/about.js
7:9  警告：请勿手动包含样式表。参见：https://nextjs.org/docs/messages/no-css-tags。  @next/next/no-css-tags
10:7 警告：禁止使用外部同步脚本。参见：https://nextjs.org/docs/messages/no-sync-scripts。  @next/next/no-sync-scripts
 
./pages/index.js
4:10 警告：请勿使用 HTML <a> 标签导航到 /about/。改用 'next/link' 中的 Link。参见：https://nextjs.org/docs/messages/no-html-link-for-pages。  @next/next/no-html-link-for-pages
 
需要禁用某些 ESLint 规则？了解更多：https://nextjs.org/docs/pages/building-your-application/configuring/eslint#disabling-rules
 
✨ 完成于 1.94 秒。

了解更多关于框架规范性的内容，请访问 谷歌博客。

性能提升

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

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

脚本优化

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

网站通常需要第三方服务，如分析、广告、客户支持工具和同意管理。然而，这些脚本往往会拖慢加载性能，影响用户体验。开发者常为在应用中放置它们以获得最佳加载效果而苦恼。

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

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

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

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

<Script
  src={url} // 同意管理
  strategy="beforeInteractive"
  onLoad={() => {
    // 如果成功加载，则可以按顺序加载其他脚本
  }}
/>

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

通过提供默认加载策略为 afterInteractive 的 Script 组件，开发者现在有了更好的默认设置以获得最佳性能，同时仍可根据需要选择 beforeInteractive。

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

图像改进

我们很高兴分享 next/image 组件中社区最期待的两项功能，减少累积布局偏移 (Cumulative Layout Shift) 并创造更流畅的视觉体验。

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

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

例如，使用内置的 Image 组件现在更加简单：

import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // 当导入图像作为源时，
    // 无需定义 `width` 和 `height`。
    <Image src={author} alt="作者照片" />
  );
}

图像占位符

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

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

<Image src={author} alt="作者照片" placeholder="blur" />

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

<Image
  src="https://nextjs.org/static/blog/next-11/learn.png"
  blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
  alt="作者照片"
  placeholder="blur"
/>

Webpack 5

在 Next.js 10.2 中，我们将 webpack 5 的推广扩展到了所有未在 next.config.js 中自定义 webpack 配置的应用。今天，我们默认所有 Next.js 应用使用 webpack 5，这将提供多种特性和改进。

我们与社区密切合作，确保顺利过渡到 webpack 5，超过 3,400 个现有的 Next.js 集成测试在每次拉取请求时都会在启用 webpack 5 的情况下运行。

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

Create React App 迁移

过去六个月中，我们看到越来越多的应用从 Create React App 迁移到 Next.js，以利用 Next.js 提供的许多开发者体验和最终用户性能改进。

为了帮助开发者将应用转换为 Next.js，我们在 @next/codemod 中引入了一个新工具，可自动将 Create React App 应用转换为兼容 Next.js 的版本。

该转换会自动添加 pages/ 目录并将 CSS 导入移动到正确位置。它还会在 Next.js 中启用 Create React App 兼容模式，确保一些在 Create React App 中使用的模式能在 Next.js 中工作。

通过利用新的转换工具，您可以逐步采用 Next.js，同时保持现有 Create React App 应用的功能。

要开始迁移您的 Create React App 项目，请使用以下命令：

npx @next/codemod cra-to-next

此功能目前处于实验阶段，请在此讨论中分享任何反馈在此讨论。

Next.js Live（预览版）

Next.js Live 是我们使命的延续，不仅让开发更快、更愉快，而且关键是要让整个组织更包容。通过利用 ServiceWorker、WebAssembly 和 ES Modules 等尖端技术，Next.js Live 将整个开发过程放到了网页浏览器中。这开启了通过 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 是超过 1,600 名独立开发者、谷歌和 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 大会上提到，但已通过 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。