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