跳到主要内容
目录

优化

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

内置组件​

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

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

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

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

元数据​

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

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

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

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

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

静态资产​

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