Next.js团队最近发布了Next.js 11。新版本致力于改善开发人员和用户的实际和感知性能（启动时间、第三方脚本加载、图像和占位符加载）。Next.js v11还提供了一个实验性的codemod，可以将Create React App应用迁移到Next.js。
Next.js团队通过为webpack提供新的Babel加载器，减少启动时间，为开发者实现了更好的体验。
开发人员现在可以通过为第三方脚本（分析、广告、A/B测试、社交分享小工具）指定三种可能的加载策略之一来提高加载性能。每个第三方脚本可以在页面互动前（beforeInteractive ）、页面互动后（afterInteractive ）或页面闲置时（lazyOnLoad ）加载。因此，不是立即需要的第三方脚本（社交媒体部件）可以适当延迟。一个自定义的<Script> 组件实现了如下的脚本加载策略。
<Script
src={url} // consent mangagement
strategy="beforeInteractive"
onLoad={() => {
// If loaded successfully, then you can load other scripts in sequence
}}
/>
Next.js报告说已经将默认的加载策略改为defer （从preload 或async ），以减少开发者的负担。谷歌浏览器团队描述了与preload 资源提示相关的一些挑战，具体如下。
虽然对关键资源使用预加载可以使加载指标改善，但对开发者来说是一个巨大的代价。这一点因Chrome浏览器中的一个严重问题进一步加剧了。
Facebook报告说，在他重新设计的facebook.com网站中使用了一套类似的加载策略。Facebook使用特定的API，根据它们是否影响折页以上的内容(importForDisplay)或不影响(importForAfterDisplay)来导入依赖性。此外，A/B测试还得到了importCond API的支持。
Next.js团队还努力通过一个定制的<Image> 组件来改善用户体验。在v11中，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" />
)
}
Image 组件还支持模糊向上的占位符，可以减少感知的加载时间。
提前获取图像尺寸和占位符显示，当两者结合时，可以减少累积布局移动（CLS），同时提供更好的用户
体验。CLS是谷歌自5月以来一直使用的核心网络指标之一，作为其排名算法的一个signal。
谷歌在搜索领域占有相当大的市场份额，这可能是推动网站审查自己在谷歌自定指标方面表现的一个重要因素。为了优化网络性能，据说从Create React App迁移到Next.js的应用程序在增加，同样的原因也可以解释这个现象。Next.js v11引入了一个实验性的代码模型，支持这种迁移。
npx @next/codemod cra-to-next
