优化
Next.js 带有一系列内置优化，旨在提高应用程序的速度和 核心 Web 指标。本指南将介绍您可以利用的优化方法来增强用户体验。
内置组件
内置组件抽象了实现常见 UI 优化的复杂性。这些组件包括
- 图像：基于原生
<img>元素构建。Image 组件通过延迟加载和根据设备大小自动调整图像大小来优化图像性能。 - 链接：基于原生
<a>标签构建。Link 组件在后台预取页面，从而实现更快、更流畅的页面过渡。 - 脚本：基于原生
<script>标签构建。Script 组件使您可以控制第三方脚本的加载和执行。
元数据
元数据帮助搜索引擎更好地理解您的内容（这可能导致更好的 SEO），并允许您自定义内容在社交媒体上的呈现方式，帮助您在各个平台上创造更具吸引力和一致性的用户体验。
Next.js 中的 Head 组件允许您修改页面的 <head>。在 Head 组件 文档中了解更多信息。
静态资产
Next.js 的 /public 文件夹可用于提供静态资产，如图像、字体和其他文件。/public 内的文件也可以被 CDN 提供商缓存，以便高效地交付。
分析和监控
对于大型应用程序，Next.js 与流行的分析和监控工具集成，以帮助您了解应用程序的性能。在 分析 中了解更多信息， OpenTelemetry,以及 检测 指南。
图片
使用内置的 `next/image` 组件优化您的图片。
字体
使用内置的 `next/font` 加载器优化应用程序的网络字体。
脚本
使用内置的 Script 组件优化第三方脚本。
静态资源
Next.js 允许您在 public 目录中提供静态文件，例如图片。您可以在此处了解其工作原理。
打包
了解如何优化应用程序的服务器和客户端包。
分析
使用 Next.js 速度洞察功能衡量和跟踪页面性能。
懒加载
懒加载导入的库和 React 组件，以提高应用程序的整体加载性能。
检测
了解如何在 Next.js 应用程序中使用检测在服务器启动时运行代码。
OpenTelemetry
了解如何使用 OpenTelemetry 检测您的 Next.js 应用程序。
第三方库
使用 `@next/third-parties` 包优化应用程序中第三方库的性能。
这有帮助吗？