Skip to main content

优化

Next.js内置了各种优化功能,旨在提高应用程序的速度和核心Web Vitals。本指南将介绍您可以利用的优化方法,以增强用户体验。

内置组件

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

  • Images(图片): 构建在原生的 <img> 元素之上。Image组件通过延迟加载和根据设备大小自动调整图像大小,从而优化性能。

  • Link(链接): 构建在原生的 <a> 标签之上。Link组件在后台预取页面,实现更快、更平滑的页面过渡。

  • Scripts(脚本): 构建在原生的 <script> 标签之上。Script组件使您可以控制第三方脚本的加载和执行。

元数据

元数据有助于搜索引擎更好地理解您的内容(这可能会带来更好的SEO), 并允许您自定义内容在社交媒体上的呈现方式, 从而在各个平台上创建更具吸引力和一致性的用户体验。

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

  • 基于配置的元数据:layout.jspage.js文件中导出一个静态metadata对象或一个动态的generateMetadata函数。

  • 基于文件的元数据: 将静态或动态生成的特殊文件添加到路由段。

此外,您还可以使用imageResponse构造函数,通过JSX和CSS创建动态的Open Graph Images。

静态资产

Next.js的/public文件夹可用于提供静态资产,如图像、字体和其他文件。 /public文件夹中的文件还可以由CDN提供商缓存,以便有效地交付它们。