Skip to main content

优化

Next.js 附带了各种内置优化，旨在提高应用的速度和 核心网络生命力。本指南将介绍你可以用来增强用户体验的优化。

¥Next.js comes with a variety of built-in optimizations designed to improve your application's speed and Core Web Vitals. This guide will cover the optimizations you can leverage to enhance your user experience.

内置组件​

¥Built-in Components

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

¥Built-in components abstract away the complexity of implementing common UI optimizations. These components are:

  • 图片：基于原生 <img> 元素构建。图片组件通过延迟加载和根据设备大小自动调整图片大小来优化图片性能。

    ¥Images: Built on the native <img> element. The Image Component optimizes images for performance by lazy loading and automatically resizing images based on device size.

  • 关联：基于原生 <a> 标签构建。链接组件在后台预取页面，以实现更快、更平滑的页面转换。

    ¥Link: Built on the native <a> tags. The Link Component prefetches pages in the background, for faster and smoother page transitions.

  • 脚本：基于原生 <script> 标签构建。脚本组件使你可以控制第三方脚本的加载和执行。

    ¥Scripts: Built on the native <script> tags. The Script Component gives you control over loading and execution of third-party scripts.

元数据​

¥Metadata

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

¥Metadata helps search engines understand your content better (which can result in better SEO), and allows you to customize how your content is presented on social media, helping you create a more engaging and consistent user experience across various platforms.

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

¥The Metadata API in Next.js allows you to modify the <head> element of a page. You can configure metadata in two ways:

此外，你可以使用 JSX 和 CSS 以及 imageResponse 构造函数创建动态开放图图片。

¥Additionally, you can create dynamic Open Graph Images using JSX and CSS with imageResponse constructor.

静态资源​

¥Static Assets

Next.js /public 文件夹可用于提供静态资源，例如图片、字体和其他文件。/public 内的文件也可以由 CDN 提供商缓存，以便高效传送。

¥Next.js /public folder can be used to serve static assets like images, fonts, and other files. Files inside /public can also be cached by CDN providers so that they are delivered efficiently.

分析和监控​

¥Analytics and Monitoring

对于大型应用，Next.js 与流行的分析和监控工具集成，可帮助你了解应用的执行情况。在 OpenTelemetry 和 仪器仪表 指南中了解更多信息。

¥For large applications, Next.js integrates with popular analytics and monitoring tools to help you understand how your application is performing. Learn more in the OpenTelemetry and Instrumentation guides.