Next.js 11.

改进的性能：进一步优化以改善冷启动时间，以便更快地开始编码。

下一个/图像：减少布局班次，并为模糊占位符进行自动尺寸检测和支持，创建更平滑的视觉体验。

WebPack 5：现在默认为所有下一个Next.js应用程序启用，为所有Next.js开发人员带来这些优势。

今天通过运行NPM i Next @最新React @最新React-DOM @最新并引用下面的迁移指南来更新。

即使在框架中具有卓越的工具和自动优化，通常要求用户和应用程序开发人员常常被要求成为UX优质主题的专家，如性能，安全性和可访问性。随着特征的增加和团队规模，开发人员需要不同地思考。

通过他们的工作建立像搜索和地图等大规模网络应用程序，谷歌已经证明框架可以在维持作为团队和应用程序规模的质量方面发挥至关重要的作用。通过利用强有力的默认和保障体系，他们赋予开发人员更关注的功能和产品。

一致性是一种系统，提供仔细制作的解决方案和规则，以支持最佳加载和核心Web Vitals，进一步添加到支持其他质量方面，如安全性和可访问性。这些解决方案免费您的团队记住所有最新规则以获得最佳的加载性能，同时仍为您提供灵活性，为您的应用程序提供正确的选择。

随着绩效研究支持的许多基础优化，下一个.js 11现在支持框中的eslint，使其在开发期间更容易捕获特定于框架的问题，并为您的团队设定框架的指南，以确保即使在缩放时也能够确保最佳实践。

要开始使用eslint，请在升级到Next.js后运行NPX下一个Lint 11. eslint集成为新的和现有的Next.js应用程序工作，提供了一组新的规则，以帮助开发人员构建更好的应用程序。

$ npx下一个lintwe为您创建了.eslintrc文件，并包含在下一个next.js eslint配置../ pages / aboun.js7：9警告：手动不包含样式表。请参阅：https://nextjs.org/docs/messages/no-css-tags。 @ Next / Next / No-CSS-Tags10：7警告：禁止外部同步脚本。请参阅：https://nextjs.org/docs/messages/no-sync -scripts。 @ next / next / no-sync-scripts。/ pages / index.js4：10警告：请勿使用HTML＆lt; a＆gt;标记导航到/约/。使用来自＆＃39的链接;下一个/链接＆＃39;反而。请参阅：https://nextjs.org/docs/messages/no-html-link-for页。 @ next / next / no-html-link-for-pagesetneed以禁用一些eslint规则？了解更多信息：https://nextjs.org/docs/basic-features/eslint#disableing-rules✨在1.94s中完成。

从下一个.js 10，我们迷惑了进一步改善下一个.js的开发人员体验。在10.1和10.2中，我们将启动时间提高到24％，并通过反应快速刷新，再次剃掉了40％的处理时间。您＆＃39;通过保留下一个新更新，ve是通过保留下一个速度改进而获得这些惊人的速度改进。

Next.js 11包括对Babel的另一个优化，以进一步减少启动时间。我们＆＃39; Ve创建了Babel Loader的Babel Loader的全新实现，用于WPPACK，优化加载和添加内存中的CONFIC CACHING层。在实践中，这意味着开发人员没有变化，但最终意味着更快的开发经验。

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

网站通常需要第三方，如分析，广告，客户支持小部件和同意管理。但是，这些脚本往往会在加载性能上繁重，并且可以拖动用户体验。开发人员经常努力决定将它们放在申请中以获得最佳加载的位置。

使用下一个/脚本，您可以定义策略属性，下一步将自动优先考虑它们以提高加载性能：

Preasteractive：对于在页面交互前需要获取和执行的关键脚本，例如机器人检测和同意管理。这些脚本从服务器注入初始HTML并在执行自捆绑JavaScript之前运行。

afterIacteractive（默认）：对于在页面交互后可以获取和执行的脚本，例如标记管理器和分析。这些脚本注入客户端，并将在保湿后运行。

LazyOnload for Scripts，可以等待在空闲时间内加载，例如聊天支持和社交媒体小部件。

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

＆lt; src = {url} //同意登鬼策略=＆＃34; Breateractive＆＃34; onload = {（）=＆gt; {//如果成功加载，则可以按顺序加载其他脚本}} /＆gt;

我们＆＃39; VE在PRELOODING和ASYNC中改变了Next.js 11中的默认脚本加载体验以推迟。第三方脚本通常与高优先级资源竞争，例如CSS，字体和图像。维护相对于这些资源的正确排序以及其他脚本，是开发人员的过度负担。

通过提供具有默认加载策略的脚本组件，开发人员现在具有更好的默认值以获得最佳性能，具有仍然需要使用的能力。

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

我们＆＃39兴奋地分享我们的两个社区和＃39;在下一个/图像组件的顶级请求的功能，减少累积布局换档并创建更平滑的视觉体验。

使用图像SRC的导入关键字自动定义静态图像的宽度和高度。

从＆＃39导入;下一个/图像＆＃39;从＆＃39导入作者; ../ public / me.png＆＃39;导出默认函数（）{return（//将图像作为源导入时，您需要定义“宽度”和“高度”。）}

下一个/图像现在支持模糊占位符，以便从空白空间转换到图像，并减少感知的加载时间，特别是对于具有较慢互联网连接的用户。

Next.js还支持模糊的动态图像，允许您提供由您的后端提供的自定义模糊金图鱼。例如，您可以在服务器上生成Blurha.sh。

使用Next.js 10.2，我们将WebPack 5的卷展栏扩展到所有应用程序中的所有应用程序，而无需在其下一个自定义WebPack配置。今天，我们＆＃39;重新制作webpack 5默认为下一个next.js应用程序，它将提供各种功能和改进。

我们与社区密切合作，以确保向WebPack 5的平滑过渡，超过3,400个现有的下一个Internie.js集成测试在每次启用WebPack 5时运行。

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

在过去的六个月中，我们看到从创建React应用程序迁移到下一个开发人员体验和最终用户性能改进的应用程序增加了。

为帮助开发人员将其应用程序转换为下一个.js，我们＆＃39; ve介绍了一个新的工具到@ next / codemod，它会自动转换为next.js兼容的创建react应用程序应用程序。

转换会自动添加页面/目录并将CSS导入到正确的位置。它＆＃39; ll还在下面的内容中启用CREATE React应用程序兼容模式，该模式可确保使用Next.js创建创建React应用程序的某些模式。

通过利用新变换，您可以逐步采用Next.js，同时保持现有创建React应用程序应用程序的功能。

Next.js Live是我们的使命继续开发的使命不仅更快，更令人愉快，而且令人遗憾的是整个组织。通过利用ServiceWorker，WebAsseMbly和ES模块等尖端技术，下一个.js Live将整个开发过程放在Web浏览器中。这使得可以使用URL即时与URL同时共享，而无需构建步骤。对于开发人员来说，这意味着更快的反馈回路，更少等待构建的时间，以及浏览器中的实时对等方案编程和编辑。

了解有关Next.js Live的更多信息以及您如何将其与Vercel＆＃39;在此处的实时协作引擎配对。

Next.js 11引入了一些破坏的更改，不应该影响大多数用户。这些遗留特征已经以后向兼容的方式维持多年，其中一些回到V4.0。

删除了这些功能以减少捆绑尺寸，并确保码条可用于未来。要了解有关从版本10到11升级的更多信息，请参阅升级指南。

使用Next.js 11，最低反应版本已更新为17.0.2。有关详细信息，请参阅React 17博客帖子。我们也与反应团队密切合作，因为它们会引入React 18. Next.js 11在使用React 18 Alpha时使用Creeatoot。

下一个.JS是超过1,600多个个人开发人员的合并工作，谷歌和Facebook等行业合作伙伴以及我们的核心团队。

我们很自豪地看到社区继续增长。仅在过去的六个月内，我们在NPM上下载下载50％，从4.1米到6.2米，使用下一个10,000中的使用下一个10,000的主页的数量增加了50％。

此版本由以下贡献给您带来：@Kahy9，@Ljosberinn，@Leerob，@Kettanaito，@Hustyfle，@devknoll，@liuuy，@timneutkens，@housseindjirdeh，@pepijnsenders，@janicklas- Ralph，@payapula，@ tmtk75，@ijjk，@hiramhuang，@ daku10，@atcastle，@matamatanot，@pelhage，@lukavic，@mzaien，@gleich，@geshan，@munawwar，@ykzts，@vitalybaev，@ mottox2， @vvo，@chrisneven，@turneand，@ d3lm，@ akellbl4，@sokra，@johnjago，@alicanyildirim，@sanathusk，@samrobbins85，@samverschueren，@ademilter，@ctjlewis，@ brandondc741，@eltociear，@martpie ，@kasipavankumar，@joecohens，@ jamsinclair，@fabianishere，@fabianishere，@mabensdemelo，@ simply007，@bradlc，@sinimawath，@rgabs，@darshkpatel，@sumanthratna，@shuding，@ prophet1996，@ JoonPark13，@tremby，@stefanprobst，@dopt，@rishabhpoddar，@aydinkn，@erfanmirzapour，@tubbo，@frontendton，@ eric-burel，@ iker-barriocanal，@ eps1lon，@gigiz，@mplis，@ handtrix和@ jigsawye。

下面的功能在下面提到了以下功能，但早期通过版本10.1和10.2发货：

Next.js Commerce shopify集成：可组合电子商务应用程序的灵活数据层。 Next.js Commerce目前支持购物，BigCommerce，Saleor，Swell和vendure。