Optimizations
Next.js 内置了多种优化功能，旨在提高你应用程序的速度和 Core Web Vitals。本指南将介绍你可以利用的优化功能，以增强用户体验。
内置组件
内置组件抽象了实现常见 UI 优化的复杂性。这些组件包括：
- Images：基于原生
<img>元素构建。Image 组件通过延迟加载和根据设备大小自动调整图像尺寸来优化图像性能。 - Link：基于原生
<a>标签构建。Link 组件在后台预取页面，实现更快速、更流畅的页面转换。 - Scripts：基于原生
<script>标签构建。Script 组件让你可以控制第三方脚本的加载和执行。
元数据
元数据帮助搜索引擎更好地理解你的内容（这可以带来更好的 SEO），并允许你自定义你的内容在社交媒体上的展示方式，帮助你在各种平台上创建更具吸引力和一致性的用户体验。
Next.js 中的 Metadata API 允许你修改页面的 <head> 元素。你可以通过两种方式配置元数据：
- 基于配置的元数据：在
layout.js或page.js文件中导出静态metadata对象或动态generateMetadata函数。 - 基于文件的元数据：将静态或动态生成的特殊文件添加到路由段。
此外，你还可以使用 imageResponse 构造函数，通过 JSX 和 CSS 创建动态 Open Graph 图像。
静态资源
Next.js 的 /public 文件夹可用于提供图像、字体和其他文件等静态资源。/public 中的文件还可以被 CDN 提供商缓存，以便高效传递。
分析和监控
对于大型应用程序，Next.js 与流行的分析和监控工具集成，帮助你了解应用程序的性能表现。在OpenTelemetry和检测指南中了解更多。