跳至内容
App 路由器构建您的应用程序优化

优化

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 衡量和跟踪页面性能

检测

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

OpenTelemetry

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

静态资源

Next.js 允许您在公共目录中提供静态文件，例如图片。您可以在此处了解其工作原理。

第三方库

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

内存使用

优化开发和生产环境中应用程序使用的内存。