共计 4525 个字符，预计需要花费 12 分钟才能阅读完成。
昨晚 next.js.cons 召开，会议公布了 next.js 11 版本以及 next.js Live，来看看重要内容！
新个性：
- Conformance：提供精心制作的解决方案以反对用户最佳体验的零碎。
- 性能改良 ：进一步优化以改善冷启动工夫，以便您能够更快地开始编码。
next/script：主动优先加载第三方脚本以进步性能。next/image：缩小布局移位，通过主动尺寸检测和反对含糊占位符发明更晦涩的视觉体验。- Webpack 5：当初默认为所有 Next.js 应用程序启用，这能够为所有 Next.js 开发人员带来这些益处。
- 创立反馈应用程序迁徙（试验）：主动转换创立反馈应用程序以兼容 Next.js。
- Next.js Live（预览版）：与您的团队实时在浏览器中编写代码。
通过运行并参考上面的迁徙指南立刻更新。
https://nextjs.org/blog/next-…
npm i next@latest react@latest react-dom@latest
Conformance
即便有弱小的工具和框架中的主动优化，网站所有者和应用程序开发人员也常常被要求成为 UX 品质主题的专家，例如性能、安全性和可拜访性。随着性能的增加和团队的扩大，开发人员须要以不同的形式思考。
通过他们致力于构建大型 Web 应用程序（如搜寻和地图），Google 曾经证实，随着团队和应用程序的扩大，框架能够在放弃品质方面施展关键作用。通过利用弱小的默认和爱护零碎，它们使开发人员可能更多地关注性能和产品。
明天，Google 的网络平台团队曾经开始应用 Conformance for Next.js 来开源他们的零碎。
Conformance 是一个零碎，它提供精心设计的解决方案和规定以反对最佳加载和 Core Web Vitals，并进一步增加反对其余品质方面，如安全性和可拜访性。这些解决方案使您的团队无需记住所有最新规定以获得最佳加载性能，同时依然让您可能灵便地为您的应用程序做出正确的抉择。
除了由性能钻研反对的许多根底优化外，Next.js 11 当初开箱即用地反对 ESLint，以便在开发过程中更轻松地捕捉特定于框架的问题，并为您的团队设置指导方针，以确保即便在扩大时也能获得最佳实际。
要开始应用 ESLint，请在降级到 Next.js 11 后运行。ESLint 集成实用于新的和现有的 Next.js 应用程序，提供一组新规定来帮忙开发人员构建更好的应用程序。
npx next lint
$ npx next lint
We created the .eslintrc file for you and included the base Next.js ESLint configuration.
./pages/about.js
7:9 Warning: Do not include stylesheets manually. See: https://nextjs.org/docs/messages/no-css-tags. @next/next/no-css-tags
10:7 Warning: External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scripts. @next/next/no-sync-scripts
./pages/index.js
4:10 Warning: Do not use the HTML <a> tag to navigate to /about/. Use Link from 'next/link' instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages. @next/next/no-html-link-for-pages
Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
✨ Done in 1.94s.性能优化
从 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 Component 是一项根底优化，让开发者能够设置第三方脚本的加载优先级，以节俭开发者工夫并进步加载性能。
网站通常须要第三方来进行剖析、广告、客户反对小部件和批准治理等工作。然而，这些脚本往往会影响加载性能，并且会连累用户体验。开发人员经常难以决定将它们搁置在应用程序中的哪个地位以实现最佳加载。
更新后您能够定义属性，Next.js 将主动优先思考它们以进步加载性能：next/scriptstrategy
beforeInteractive：用于在页面交互之前须要获取和执行的要害脚本，例如机器人检测和批准治理。这些脚本从服务器注入到初始 HTML 中，并在执行自绑定 JavaScript 之前运行。afterInteractive（默认）：用于能够在页面交互后获取和执行的脚本，例如标签管理器和剖析。这些脚本是在客户端注入的，将在水合后运行。lazyOnload对于能够在闲暇工夫期待加载的脚本，例如聊天反对和社交媒体小部件。
图像改良
咱们很快乐与大家分享咱们社区对该组件最须要的两个性能，缩小累积布局偏移带来更晦涩的视觉体验。next/image
主动尺寸检测（本地图像）
应用关键字为图像自定义和为动态图像.importsrcwidthheight
例如，应用内置的 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 还通过容许您提供由后端提供的自定义来反对含糊动静图像。例如，您能够在服务器上生成一个 blurha.sh。blurDataURL
<Image
src="https://nextjs.org/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 的推出扩大到所有 .js 文件中没有自定义 webpack 配置的应用程序。明天，咱们将 webpack 5 设为所有 Next.js 应用程序的默认版本，它将提供各种性能和改良。next.config.js
咱们与社区密切合作，以确保顺利过渡到 webpack 5，在启用 webpack 5 的每个拉取申请上运行超过 3,400 个现有的 Next.js 集成测试。
如果您的应用程序具备自定义 webpack 配置，咱们建议您遵循 webpack 5 的降级文档。如果您遇到任何问题，请与咱们分享反馈。
CRA 迁徙
在过来的六个月中，咱们看到越来越多的应用程序从 Create React App 迁徙到 Next.js，以利用 Next.js 提供的许多开发人员体验和最终用户性能改良。
为了帮忙开发人员将他们的利用程序转换为 Next.js，咱们引入了一个新工具来主动将 Create React App 利用程序转换为 Next.js 兼容。@next/codemod
转换会主动增加一个目录并将 CSS 导入挪动到正确的地位。它还将在 Next.js 中启用 Create React App 兼容模式，以确保 Create React App 中应用的某些模式与 Next.js.pages/
通过利用新的转换，您能够逐渐采纳 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 将整个开发过程放在 Web 浏览器中。这开拓了诸如应用 URL 即时合作和共享之类的可能性，而无需构建步骤。对于开发人员来说，这意味着更快的反馈循环、更少的期待构建的工夫以及浏览器中的实时对等编程和编辑。