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

优化

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

内置组件

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

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

元数据

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

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

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

静态资源

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

分析和监控

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

图像

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

视频

在您的 Next.js 应用程序中优化视频的建议和最佳实践。

字体

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

元数据

使用元数据 API 在任何布局或页面中定义元数据。

脚本

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

包捆绑

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

懒加载

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

分析

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

检测

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

OpenTelemetry

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

静态资源

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

第三方库

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

内存使用

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