跳到内容
Pages Router构建你的应用优化

优化

Next.js 配备了各种内置优化，旨在提高应用程序的速度和 Core Web Vitals。本指南将介绍您可以利用的优化措施，以提升用户体验。

内置组件

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

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

元数据

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

Next.js 中的 Head 组件允许您修改页面的 <head>。在 Head 组件 文档中了解更多信息。

静态资源

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

分析和监控

对于大型应用程序，Next.js 与流行的分析和监控工具集成，以帮助您了解应用程序的性能。在分析， OpenTelemetry,和检测指南中了解更多信息。

图像

使用内置的 `next/image` 组件优化您的图像。

字体

使用内置的 `next/font` 加载器优化您应用程序的 Web 字体。

脚本

使用内置的 Script 组件优化第三方脚本。

静态资源

Next.js 允许您在 public 目录中提供静态文件，例如图像。您可以在这里了解它是如何工作的。

捆绑

了解如何优化应用程序的服务器和客户端捆绑包。

分析

使用 Next.js Speed Insights 衡量和跟踪页面性能

懒加载

懒加载导入的库和 React 组件，以提高应用程序的整体加载性能。

检测

了解如何在 Next.js 应用程序中使用检测在服务器启动时运行代码

OpenTelemetry

了解如何使用 OpenTelemetry 检测您的 Next.js 应用程序。

第三方库

使用 `@next/third-parties` 包优化应用程序中第三方库的性能。