优化
Next.js 内置了多种优化功能，旨在提高应用的速度和 核心 Web 指标。本指南将介绍你可以利用的优化措施，以增强用户体验。
内置组件
内置组件抽象了实现常见 UI 优化的复杂性。这些组件包括：
- 图像：基于原生
<img>元素构建。Image 组件通过延迟加载和根据设备大小自动调整图像尺寸来优化图像性能。 - 链接：基于原生
<a>标签构建。Link 组件在后台预取页面，实现更快速、更流畅的页面转换。 - 脚本：基于原生
<script>标签构建。Script 组件让你可以控制第三方脚本的加载和执行。
元数据
元数据有助于搜索引擎更好地理解你的内容 (从而提高 SEO)，并允许你自定义内容在社交媒体上的展示方式，帮助你在各种平台上创建更具吸引力和一致性的用户体验。
Next.js 中的元数据 API 允许你修改页面的 <head> 元素。你可以通过两种方式配置元数据：
- 基于配置的元数据：在
layout.js或page.js文件中导出 静态metadata对象 或动态generateMetadata函数。 - 基于文件的元数据：向路由段添加静态或动态生成的特殊文件。
此外，你还可以使用 imageResponse 构造函数，通过 JSX 和 CSS 创建动态 Open Graph 图像。
静态资源
Next.js 的 /public 文件夹可用于存放图像、字体和其他静态文件。/public 中的文件也可以被 CDN 提供商缓存，从而高效地交付。
分析和监控
对于大型应用，Next.js 与流行的分析和监控工具集成，帮助你了解应用的性能表现。在OpenTelemetry和 检测 指南中了解更多信息。
图片优化
使用内置的 `next/image` 组件优化你的图片。
视频优化
在 Next.js 应用中优化视频的建议和最佳实践。
字体优化
使用内置的 `next/font` 加载器优化应用程序的网页字体。
元数据
使用元数据 API 在任何布局或页面中定义元数据。
脚本优化
使用内置的 Script 组件优化第三方脚本。
优化包的打包
了解如何优化应用程序的服务器端和客户端包。
懒加载
懒加载导入的库和React组件,以提高应用程序的加载性能。
性能分析
使用 Next.js Speed Insights 测量和跟踪页面性能
instrumentation
了解如何使用 instrumentation 在 Next.js 应用程序中在服务器启动时运行代码
OpenTelemetry
了解如何使用 OpenTelemetry 对你的 Next.js 应用进行检测。
public 目录中的静态资源
Next.js 允许你在 public 目录中提供静态文件，如图片。你可以在这里了解它是如何工作的。
第三方库
使用 `@next/third-parties` 包优化应用程序中第三方库的性能。
内存使用
优化应用程序在开发和生产中使用的内存。