優化
Next.js 內建多種優化功能，旨在提升應用程式的速度和 核心網頁指標。本指南將涵蓋您可以利用的優化功能，以增強使用者體驗。
內建元件
內建元件簡化了常見 UI 優化的實作複雜性。這些元件包括：
- 圖片：基於原生
<img>元素建構。圖片元件透過延遲載入和根據裝置大小自動調整圖片大小來優化圖片效能。 - 連結：基於原生
<a>標籤建構。連結元件會在背景預先擷取頁面，以實現更快、更順暢的頁面轉換。 - 指令碼：基於原生
<script>標籤建構。指令碼元件讓您可以控制第三方指令碼的載入和執行。
詮釋資料
詮釋資料可協助搜尋引擎更好地理解您的內容（進而提升 SEO），並允許您自訂內容在社群媒體上的呈現方式，幫助您在各種平台上創造更具吸引力和一致的使用者體驗。
Next.js 中的詮釋資料 API 允許您修改頁面的 <head> 元素。您可以透過兩種方式設定詮釋資料：
- 基於設定的詮釋資料：在
layout.js或page.js檔案中匯出靜態metadata物件或動態generateMetadata函式。 - 基於檔案的詮釋資料：將靜態或動態產生的特殊檔案新增至路由區段。
此外，您可以使用 imageResponse 建構函式，透過 JSX 和 CSS 建立動態的 Open Graph 圖片。
靜態資源
Next.js 的 /public 資料夾可用於提供靜態資源，例如圖片、字體和其他檔案。/public 內的檔案也可以由 CDN 提供商快取，以便有效地傳遞。
分析和監控
對於大型應用程式，Next.js 與熱門的分析和監控工具整合，可協助您了解應用程式的效能。在 OpenTelemetry 和 檢測 指南中了解更多資訊。
Images
Optimize your images with the built-in `next/image` component.
Videos
Recommendations and best practices for optimizing videos in your Next.js application.
Fonts
Optimize your application's web fonts with the built-in `next/font` loaders.
Metadata
Use the Metadata API to define metadata in any layout or page.
Scripts
Optimize 3rd party scripts with the built-in Script component.
Package Bundling
Learn how to optimize your application's server and client bundles.
Lazy Loading
Lazy load imported libraries and React Components to improve your application's loading performance.
Analytics
Measure and track page performance using Next.js Speed Insights
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.
Static Assets
Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.
Third Party Libraries
Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.
Memory Usage
Optimize memory used by your application in development and production.
這個對您有幫助嗎？