Next.js 11
内容提要
Next.js 11发布了多项新功能，包括Conformance系统、冷启动性能提升、自动加载第三方脚本、改进的next/image组件以及默认启用Webpack 5。此外，新增的Create React App迁移工具和Next.js Live功能提升了开发效率和实时协作能力。
延伸解读
Conformance 与 ESLint：将性能最佳实践制度化
Next.js 11 引入的 Conformance 系统，源自 Google 在大规模 Web 应用中的经验，旨在通过强默认值和规则来保障加载性能与 Core Web Vitals。同时，Next.js 11 内置了 ESLint 支持，运行 npx next lint 即可检查框架特定问题，如禁止手动引入样式表、禁止同步脚本等。这有助于团队在规模扩大时仍能维持最佳实践，减少对开发者记忆规则的依赖。
next/script：第三方脚本加载策略的精细化控制
新推出的 next/script 组件允许开发者通过 strategy 属性定义脚本加载优先级：beforeInteractive 用于关键脚本（如机器人检测、同意管理），在页面可交互前执行；afterInteractive（默认）用于标签管理、分析等；lazyOnload 用于空闲时加载的聊天支持、社交组件。Next.js 11 还将默认脚本加载从预加载和异步改为 defer，避免第三方脚本与高优先级资源竞争，提升加载性能。
next/image 改进：减少布局偏移与优化视觉体验
next/image 组件新增自动尺寸检测和模糊占位符支持。对于本地静态图片，使用 import 引入即可自动设置宽高，无需手动指定，从而减少累积布局偏移。添加 placeholder="blur" 可启用模糊占位符，缓解从空白到图片的过渡，尤其利于慢速网络用户。动态图片可通过 blurDataURL 提供自定义模糊数据，由后端生成。这些改进直接回应了社区最迫切的需求。
升级注意事项与迁移工具
Next.js 11 将最低 React 版本更新至 17.0.2，并移除了一些可追溯至 v4.0 的旧特性以减小包体积，多数用户不受影响。Webpack 5 现为所有应用的默认配置，若存在自定义 webpack 配置，建议参考升级文档。新增的实验性 Create React App 迁移工具（npx @next/codemod cra-to-next）可自动添加 pages/ 目录、移动 CSS 导入，并启用兼容模式，支持增量迁移。Next.js Live 预览版则利用 ServiceWorker、WebAsse
Q&A
Next.js 11的新功能有哪些？
Next.js 11发布了Conformance系统、冷启动性能提升、自动加载第三方脚本、改进的next/image组件、默认启用Webpack 5，以及Create React App迁移工具和Next.js Live功能。
Conformance系统的作用是什么？
Conformance系统提供优化用户体验的解决方案，帮助开发者关注性能、安全性和可访问性等质量方面。
如何提高Next.js应用的冷启动性能？
Next.js 11通过优化Babel和其他基础设施，进一步提升了冷启动性能，使开发者能够更快开始编码。
next/image组件有哪些改进？
next/image组件现在支持自动大小检测和模糊占位符，减少布局偏移，提供更流畅的视觉体验。
Webpack 5在Next.js 11中的作用是什么？
Webpack 5在Next.js 11中默认启用，为所有应用提供新特性和改进，提升构建效率。
Next.js Live功能有什么优势？
Next.js Live允许团队实时协作和编码，提升开发效率，减少等待构建的时间。
