优化
Next.js 内置了多种优化方案，旨在提升应用速度和 核心网页指标 (Core Web Vitals)。本指南将介绍可用来增强用户体验的优化手段。
内置组件
内置组件封装了常见 UI 优化方案的实现复杂度。这些组件包括：
- 图片组件 (Images)：基于原生
<img>元素开发。通过懒加载和根据设备尺寸自动调整图片大小来优化图片性能。 - 链接组件 (Link)：基于原生
<a>标签开发。通过预取页面实现更快速流畅的页面切换。 - 脚本组件 (Scripts)：基于原生
<script>标签开发。提供对第三方脚本加载和执行的控制能力。
元数据
元数据能帮助搜索引擎更好地理解您的内容（从而提升 SEO 效果），并允许您自定义内容在社交媒体上的展示方式，帮助您在不同平台创造更具吸引力和一致性的用户体验。
Next.js 的 Head 组件允许您修改页面的 <head> 元素。详见 Head 组件 文档。
静态资源
Next.js 的 /public 文件夹可用于托管图片、字体等静态资源。/public 内的文件还可被 CDN 提供商缓存以实现高效分发。
分析与监控
对于大型应用，Next.js 集成了主流分析和监控工具，帮助您了解应用性能表现。更多内容请参阅 分析工具、 OpenTelemetry、 以及 埋点监控 指南。
图片
使用内置的 `next/image` 组件优化您的图片。
字体
使用内置的 `next/font` 加载器优化您应用的网页字体。
脚本
使用内置的 `<Script>` 组件优化第三方脚本。
静态资源 (Static Assets)
Next.js 允许您在 public 目录中提供静态文件，例如图片。您可以在此了解其工作原理。
打包分析工具
使用 @next/bundle-analyzer 插件分析 JavaScript 包的体积大小。
分析 (Analytics)
使用 Next.js Speed Insights 测量和跟踪页面性能
懒加载 (Lazy Loading)
通过懒加载导入的库和 React 组件来提升应用的加载性能。
仪表化 (Instrumentation)
了解如何在 Next.js 应用中通过仪表化 (Instrumentation) 在服务器启动时运行代码
OpenTelemetry
了解如何使用 OpenTelemetry 为您的 Next.js 应用添加监控功能。
第三方库
使用 `@next/third-parties` 包优化应用程序中第三方库的性能。