性能优化
Next.js 内置了多种优化方案，旨在提升应用速度和 核心网页指标 (Core Web Vitals)。本指南将介绍可用来增强用户体验的优化手段。
内置组件
内置组件封装了常见 UI 优化方案的实现复杂度。这些组件包括：
- 图片组件 (Images)：基于原生
<img>元素开发。通过懒加载和根据设备尺寸自动调整图片大小来优化图片性能。 - 链接组件 (Link)：基于原生
<a>标签开发。通过预取页面实现更快速流畅的页面切换。 - 脚本组件 (Scripts)：基于原生
<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 组件优化第三方脚本。
打包分析工具
使用 @next/bundle-analyzer 插件分析你的 JavaScript 打包体积。
懒加载 (Lazy Loading)
通过延迟加载导入的库和 React 组件来提升应用的加载性能。
分析 (Analytics)
使用 Next.js Speed Insights 测量和跟踪页面性能
代码插桩 (Instrumentation)
了解如何在 Next.js 应用中通过代码插桩 (Instrumentation) 实现服务器启动时运行代码
OpenTelemetry
了解如何为您的 Next.js 应用集成 OpenTelemetry 监控。
静态资源
Next.js 允许您在 public 目录中托管静态文件（如图片）。您可以在此了解其工作原理。
第三方库
通过 `@next/third-parties` 包优化应用程序中第三方库的性能。
内存使用
优化应用在开发和生产环境中的内存使用情况。