Optimizations
Next.js 内置了多种优化功能，旨在提高应用的速度和 核心 Web 指标。本指南将介绍你可以利用的优化措施，以增强用户体验。
内置组件
内置组件抽象了实现常见 UI 优化的复杂性。这些组件包括：
- 图像：基于原生
<img>元素构建。Image 组件通过延迟加载和根据设备大小自动调整图像尺寸来优化图像性能。 - 链接：基于原生
<a>标签构建。Link 组件在后台预取页面，实现更快速、更流畅的页面转换。 - 脚本：基于原生
<script>标签构建。Script 组件让你可以控制第三方脚本的加载和执行。
元数据
元数据有助于搜索引擎更好地理解你的内容 (从而提高 SEO)，并允许你自定义内容在社交媒体上的展示方式，帮助你在各种平台上创建更具吸引力和一致性的用户体验。
Next.js 中的 Head 组件允许你修改页面的 <head>。在 Head 组件 文档中了解更多信息。
静态资源
Next.js 的 /public 文件夹可用于存放图像、字体和其他静态文件。/public 中的文件也可以被 CDN 提供商缓存，从而高效地交付。
分析和监控
对于大型应用，Next.js 与流行的分析和监控工具集成，帮助你了解应用的性能表现。在 分析、OpenTelemetry、和 检测 指南中了解更多信息。
Image Optimization
Optimize your images with the built-in `next/image` component.
Font Optimization
Optimize your application's web fonts with the built-in `next/font` loaders.
Script Optimization
Optimize 3rd party scripts with the built-in Script component.
Static Assets
Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.
Optimizing Bundling
Learn how to optimize your application's server and client bundles.
Analytics
Measure and track page performance using Next.js Speed Insights
Lazy Loading
Lazy load imported libraries and React Components to improve your application's overall loading performance.
Instrumentation
Learn how to use instrumentation to run code at server startup in your Next.js app
OpenTelemetry
Learn how to instrument your Next.js app with OpenTelemetry.
Third Party Libraries
Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.