Next.js 10
内置映像组件和自动映像优化：使用新的Next/Image组件自动优化映像。
MDX的快速刷新：使用@Next/MDX时，现在可以利用快速刷新来应用更改，而无需重新加载整个页面。
从第三方Reaction组件导入CSS：现在支持从NPM导入组件所需的CSS。
阻塞getStaticPath的回退：在生成新的静态页面时等待预呈现，而不是提供静态回退页面。
今年，我们已经在开发人员体验和提高所有Next.js应用程序的性能方面投入了大量资金。我们专注于减少浏览器必须加载的JavaScript数量。
我们引入了20多个改进性能和开发人员体验的新功能。同时，Next.js内核的JavaScript大小减少了16%。
一月份，我们与Google Chrome团队合作，引入了一种新的同类最佳的JavaScript代码拆分策略。
例如，Barnebys的应用程序大小减少了23%，SumUp的最大Javascript包大小减少了70%。这些改进是在不更改其Next.js应用程序中的任何代码的情况下实现的。
虽然我们对减少浏览器必须加载的JavaScript的关注得到了回报，但Web不仅仅是Javascript：它还包括标记和图像。
图片对最大的内容绘画有很大的影响，因为它们通常是页面加载时最大的可见元素。最大的内容绘画是核心网络的关键，谷歌很快就会在他们的搜索排名中使用它。
所有图片中有一半的大小超过1兆字节，这意味着它们没有经过优化，不适合在网络上显示。
如今，用户使用手机、平板电脑和笔记本电脑浏览网页，但图像仍然是一刀切的。例如：网站加载的是2000x2000像素的图像，但手机仅将其显示为100x100像素。
此外，网页上30%的图像位于初始视口之外，这意味着浏览器会加载用户在进一步向下滚动页面之前看不到的图像。
图像通常没有宽度和高度属性，导致它们在加载页面时跳来跳去。这对累积布局转变核心网络造成了至关重要的影响。
为了在网页上高效地使用图像，必须考虑很多方面：大小、重量、延迟加载和现代图像格式。
开发人员必须设置复杂的构建工具来优化图像，但是这些工具通常不包括来自外部数据源的用户提交的图像，因此不可能优化所有图像。
我们很兴奋地宣布我们的解决方案，性能图像在网络上：Next.js图像组件和自动图像优化。
在最基本的情况下，Next.js Image组件只是HTML<；img>；元素的临时替代品，它是为现代网络而发展起来的。
Google Chrome团队帮助创建了这个Reaction组件，通过将最佳实践作为默认设置来提高页面性能。
当使用Next/image组件时，图像会自动延迟加载，这意味着只有在用户接近看到图像时才会呈现它们。这样可以防止将30%的图像加载到初始视口之外。
图像尺寸是强制的，允许浏览器立即呈现图像所需的空间，而不是在加载时跳入，从而防止布局移动。
虽然HTML<；img>；元素上的宽度和高度可能会导致响应布局出现问题，但在使用next/image时情况并非如此。使用NEXT/IMAGE时，图像会根据提供的宽度和高度的纵横比自动响应。
开发人员可以标记初始视口中的图像，从而允许Next.js自动预加载这些图像。在初始视口中预加载图像对最大的内容绘画进行了高达50%的改进。
即使与HTML<；img>；元素相比有了这些改进，仍然存在一个主要问题。2000 x 2000像素的图像被发送到渲染较小图像的手机。
随着Next.js10的问世，我们也在解决这个问题。NEXT/IMAGE组件将通过内置的映像优化自动生成较小的尺寸。
内置图像优化功能会自动以现代图像格式(如WebP)为图像提供服务，如果浏览器支持的话，WebP比JPEG小约30%。它还允许Next.js自动采用未来的图像格式，并将其提供给支持这些格式的浏览器。
图像优化适用于任何图像源。即使图像来自外部数据源，如CMS，它们也是经过优化的。
Next.js10不是在构建时优化映像，而是在用户请求时按需优化映像。与静态站点生成器和纯静态解决方案不同，无论发送10个映像还是1000万个映像，您的构建时间都不会增加。
新的Next/Image组件和自动映像优化是功能强大的新原语，将极大地改善用户体验。
Next/image组件处理自动延迟加载、关键图像的预加载、跨设备正确调整大小，并自动支持现代格式。这些功能适用于任何来源的图像。
我们期待着看到您的用户体验在使用这些新Primite时会变得多快。
今年，几家企业和社区成员帮助我们的团队理解了国际化的重要性。
例如，我们了解到，如果网站经过翻译，72%的消费者更有可能留在你的网站上，55%的消费者表示他们只从电子商务网站购买本国语言的商品。
如果您计划在不同的国家投放市场，将您的项目国际化是成功的关键。
许多Reaction库准备要翻译的应用程序，但它们中的大多数都希望您手动处理路由，并且通常只使用一种呈现策略。
这就是为什么，作为Next.js10的一部分，我们将发布对国际化路由和语言检测的内置支持。
这种对国际化路由的内置支持支持Next.js'；混合策略，因此您可以在基于每个页面的静态生成或服务器呈现之间进行选择。
通常，区域设置标识符由由破折号分隔的语言、区域和脚本组成：Language-Region-Script。区域和脚本是可选的。例如：
子路径路由将区域设置放在URL中。这使得所有语言都可以存在于单个域中。
域路由使您能够将区域设置映射到顶级域。例如，example.nl可以映射到NL区域设置，example.com可以映射到EN区域设置。
//next.config.jsmodule。Exports={i18n：{locales：['；en'；，'；nl'；]，域名：[{domain：'；example.com'；，defaultLocale：'；en'；}，{domain：'；example.nl'；，defaultLocale：'；nl'；}]}}。
Js10在/route上内置了基于Accept-Language标头的语言检测，所有现代浏览器都支持这一点。配置的区域设置将与Accept-Language标头匹配，然后根据配置的策略进行重定向。
因为Next.js知道用户访问的页面的语言，所以它会自动将lang属性添加到<；html>；标记。
Js并不知道页面的变体，所以是否使用next/head添加hrefang元标记取决于您。您可以在Google网站管理员文档中了解更多关于hrefang的信息。
国际化路由是一系列功能中的第一个，这些功能将使您的项目更容易国际化和本地化。国际化路由允许与大多数REACT国际化库集成。
您的访问者对站点性能越来越敏感。如果你的网站加载时间超过3秒，超过50%的人会放弃你的网站。如果你从事电子商务，很多人发现，将你的加载时间提高1/10秒，转化率会增加1%。
由于性能对您的成功至关重要，我们很自豪地发布Next.js Analytics。用于跟踪真实性能指标并将这些洞察力反馈到您的开发工作流中的解决方案。
度量将来自您的访问者正在使用的实际设备，而不是在您的开发设备上进行测量。
Next.js Analytics关注整体情况，深入了解您的受众，以及您的应用程序如何为您的用户执行操作。
我们对收集真实数据非常坚决，因为业绩不佳的原因并不总是最明显的。性能下降可能由多种原因引起-第三方脚本和样式表，或者第一方字体、图像和视频过大或过慢。
Google与Web性能工作组合作，建立了一套准确衡量用户体验网站性能的指标：Web Vitals，这是一个恰当的名称。Web Vitals是跟踪您网站的感知加载速度、响应速度和视觉稳定性的指标-所有这三项对网站的整体健康状况都是必不可少的！
感知的加载速度可以通过最大的内容油漆来测量，或者当页面的所有内容都已显示时。例如，当我打开一个购买运动鞋的链接-在我看到我的运动鞋之前的时间，它们的价格，添加到购物车按钮是LCP。
页面响应性可以通过第一次输入延迟来衡量，该延迟衡量用户必须等待多长时间才能看到他们第一次与页面交互的反应。例如，我单击“添加到购物车”和购物车中的物品数量递增之间的时间量是FID。
最后，视觉稳定性可以通过累计布局移位或元素在显示给用户后的移动量来衡量。例如，我们都经历过因为图像加载晚了而试图点击移动的按钮时的挫折感--这就是布局转移。
对于您的实际用户来说，围绕这些Web Vitals的持续测量和一致性是至关重要的。这是真正了解您的站点如何为您的用户服务的唯一途径。根据用户的设备和他们的网络状况，或者他们与页面的交互方式，您网站的性能可能会有很大的不同。加载个性化内容或广告的网站也可能因用户而异。
Next.js Analytics允许您捕获真实世界的洞察力，而不是合成基准。它支持持续的测量流，而不是依赖于不定期的测试，确保它成为您开发人员工作流程的一部分。
Next.js Analytics允许您捕获真实世界的洞察力，而不是合成基准。它支持持续的测量流，而不是依赖于不定期的测试，确保它成为您开发人员工作流程的一部分。
电子商务是网络最重要的用途之一。新的Next.js10特性是强大的电子商务新工具。
这就是为什么今天，我们与BigCommerce合作，发布了Next.js Commerce，这是电子商务网站的一体机入门套件。只需单击几下，Next.js开发人员就可以克隆、部署和完全定制它。现在就从nextjs.org/Commerce开始。
Reaction 17没有对Next.js进行突破性更改，但是需要进行一些维护更改，例如更新对等依赖项。新的JSX转换在使用REACTION 17时自动启用，不需要更改配置。
要开始使用REACTION 17，您只需升级Next.js并做出反应：
在编辑getStaticProps和getServerSideProps函数时，Next.js现在将自动重新运行该函数并应用新数据。这使您可以更快地迭代，而不必刷新页面。
当通过@Next/MDX将Next.js与MDX一起使用时，更改MDX内容现在将利用快速刷新，确保浏览器在编辑时不必重新加载页面。
现在，您可以在Reaction组件中导入第三方CSS。这允许仅用于单个组件的代码拆分CSS。例如，您现在可以使用Reaction-Datepicker库，而无需导入_app.js中的CSS：
您可以参考内置的CSS支持文档，了解有关Next.js如何处理CSS导入的更多信息。
如果您以前使用过动态路由，那么您以前可能遇到过必须为next/link同时提供href和as属性的情况。它看起来应该是这样的：
这允许Next.js插入动态参数的href，但是，当开发人员忘记在href中添加AS或在HREF中添加AS导致页面转换不使用客户端路由时，会造成摩擦。
几个月前，我们开始为开发人员解决这一摩擦，主要目标是改善开发人员体验和最终用户体验。我们渐进式地致力于一种允许自动解析HREF的解决方案。
我们很高兴地宣布，作为Next.js10的一部分，您不再需要在大多数用例中使用as属性。消除开发人员的摩擦，改善最终用户体验。
如果当前同时使用HREF和，则此更改完全向后兼容，因为保留了现有行为。
为了采用自动HREF解析，您所要做的就是更改NEXT/LINK的用法，以便只使用HREF来保存您以前在中拥有的值作为属性。
要了解有关NEXT/LINK和客户端路由的更多信息，您可以参考NEXT/LINK文档。
我们致力于通过广泛的向后兼容性来确保Next.js升级尽可能顺利。这一承诺从极少贬低功能开始，同时引入新的、更好的解决方案取而代之。除了这一承诺之外，我们还对所有Next.js功能进行了广泛的集成测试，包括复制本地开发的测试。
当Next.js中的某个特性被弃用并需要进行大量的代码库更改时，我们的团队会为其创建一个代码库。Codemod是一种自动代码转换，您可以在项目上运行它来更新源代码。
例如：我们发布了一个用于将箭头函数和匿名函数更新为命名函数的代码。此转换是必需的，因为否则Reaction Fast Refresh不会将该函数检测为有效的Reaction组件。类似地，Reaction钩子的eslint规则不会将函数作为Reaction组件获取。
对于Next.js 10，我们将发布一个新的Next.js codemods CLI工具，该工具允许您运行单个命令来更新您的应用程序：npx@next/codemod<；Transform>；<；path>；。
在Next.js9.3中，我们引入了getStaticProps和getStaticPath，以及在getStaticPath中返回回退属性的功能。Fallback属性允许在不需要完全重新生成的情况下生成额外的静态页面，最初提供静态HTML文件，然后在后续请求中用完全呈现的内容替换该文件。在过去的几个月里，我们收到了很多公司的反馈，他们想要一种类似但略有不同的行为：当用户第一次请求页面时，进行阻塞预渲染。在初始呈现之后，页面将重新用于后续请求。
我们很高兴地宣布，getStaticPath的新回退：阻塞模式启用了不会向浏览器发送静态回退的阻塞行为。相反，初始请求等待预渲染。
导出函数getStaticPath(){return{//启用回退行为回退的阻塞模式：'；BLOCKING'；}}。
要了解有关增量生成附加静态页的后备行为的更多信息，可以参考后备文档。
自从9.5发布以来，我们已经有超过1300个独立贡献者，还有超过120个新贡献者。
加入有关GitHub讨论的Next.js社区。讨论是一个社区空间，允许您与其他Next.js用户联系，并自由提问或分享您的工作。
我们感谢我们的社区，包括所有帮助塑造此版本的外部反馈和贡献。
本新闻稿由以下人员提供给您：@ijjk、@adebiyial、@elliottsj、@saintmalik、@HaNdTriX、@prateekbh、@amirsaeed671、@paambaati、@imagentleman、@gregrickaby、@Janpot、@atCastle、@Kirkhammetz、@remorses、@davidsonsns、@kmkzt、@slwekolziej、@Timer、@styfzle、@timneutkens、@ykzts、@ashell、@oryoffe、@fades、@justinwhall、@fodias、@ludofischer、@Felipegumemefs、@gr-qft、@davidsonsns、@kmkzt、@slwekolziej、@timneutkens、@ykzts、@ashell、@orYoffe、@fades、@justinwhall、@fodias、@ludofischer、@Felipegumemefs、@gr-qft、@davidsonsns。@TasukuUno，@YichiZ，@weichienhung，@seosmmbusiness，@HsuTing，@gsimone，@peduarte，@ztanner，@Neighborhood999，@chibiode，@merceyz，@opudalo，@lunchboxav，@mohsen1，@akd-io，@justman00，@Helloworld，@devnukoll，@borekb，@arthurMaverick，@sakito21，@trySound，@omBrtenaito，@svenheden，@hallaji，@kettanbrtenaito，@vvo，@m-Lautenbach，@jensmeinderta，@Zeloworld，@glo，@stefan prost，@arthurMaverho，@svenheden，@hallaji，@kettanbrtenaito，@vvo，@m-Lautenbach，@jensmeinderta。@Lauharn，@sdornan，@daneroo，@Mohd-Akram，@austingmang，@spHilee，@devinekdeni，@Bacher，@nghiepit，@tomasdisk，@Leader22，@paulogdm，@284 km，@belgatuate，@geritol，@istikj，@sampoder，@samrobbins85，@Pitasi，@digitalPlayer1125，@timfee，@Plug-n-play，@philihp，@leerob，@dylanjjha，@kerumen，@rdimaio，@jorisw，@binidzeramata，@jamesgeorge007，@Jashnm，@Pitasi，@digitalPlayer1125，@timfee，@Plug-n-play，@philihp，@leerob，@dylanjisw，@binidzeramata，@jamesgeorge007。还有“复旦！
