Skip to main content

优化

Next.js 具有多种内置优化，旨在提高应用程序的速度和 核心 Web 体验。本指南将为您介绍可以利用的优化，以增强用户体验。

内置组件​

内置组件抽象了实现常见 UI 优化的复杂性。这些组件包括：

  • Images: 基于原生<img>元素。Image 组件通过懒加载和根据设备大小自动调整图像大小来优化图像性能。
  • Link: 基于原生<a>标签。Link 组件在后台预取页面，以实现更快、更流畅的页面过渡。
  • Scripts: 基于原生<script> 标签。Script 组件让您可以控制第三方脚本的加载和执行。

Metadata​

Metadata 有助于搜索引擎更好地理解您的内容（这可以带来更好的 SEO），并允许您自定义内容在社交媒体上的呈现方式， 帮助您在各种平台上创建更具吸引力和一致性的用户体验。

Next.js 中的 Metadata API 允许您修改页面的 <head>元素。您可以通过两种方式配置 metadata:

此外, 您可以使用 JSX 和 CSS 以及imageResponse构造函数创建动态 Open Graph 图像。

静态资源​

Next.js 的/public文件夹可用于提供静态资源，如图像、字体和其他文件。/public文件夹中的文件也可以由 CDN 提供商缓存，以便高效地传递。

分析和监控​

对于大型应用程序，Next.js 集成了流行的分析和监控工具，帮助您了解应用程序的运行情况。了解更多信息，请参阅OpenTelemetry 和 Instrumentation 指南。