最佳化
Next.js 內建多種最佳化功能，旨在提升應用程式的速度和 Core Web Vitals。本指南將涵蓋您可利用的最佳化功能，以提升使用者體驗。
內建元件
內建元件抽象化了實作常見 UI 最佳化的複雜性。這些元件包括：
- 圖片：建立於原生
<img>元素之上。Image 元件透過延遲載入和根據裝置尺寸自動調整圖片大小來最佳化圖片效能。 - Link：建立於原生
<a>標籤之上。Link 元件會在背景預先抓取頁面，以實現更快、更流暢的頁面轉換。 - Scripts：建立於原生
<script>標籤之上。Script 元件讓您能夠控制第三方腳本的載入和執行。
Metadata
Metadata 有助於搜尋引擎更好地理解您的內容 (這能帶來更好的 SEO)，並讓您自訂內容在社群媒體上的呈現方式，協助您在各種平台上建立更吸引人且一致的使用者體驗。
Next.js 中的 Head 元件可讓您修改頁面的 <head>。請參閱 Head 元件 文件以瞭解更多資訊。
靜態資源
Next.js /public 資料夾可用於提供靜態資源，例如圖片、字體和其他檔案。/public 內的檔案也可以由 CDN 提供商快取，以便有效率地傳遞這些檔案。
分析和監控
對於大型應用程式，Next.js 與熱門的分析和監控工具整合，以協助您瞭解應用程式的效能。請參閱 分析 中的更多資訊， OpenTelemetry,和 檢測 指南。
圖片
使用內建的 `next/image` 元件最佳化您的圖片。
字體
使用內建的 `next/font` 載入器最佳化應用程式的網頁字體。
Scripts
使用內建的 Script 元件最佳化第三方腳本。
靜態資源
Next.js 允許您在 public 目錄中提供靜態檔案，例如圖片。您可以在此處瞭解其運作方式。
捆綁
瞭解如何最佳化應用程式的伺服器和用戶端捆綁包。
分析
使用 Next.js Speed Insights 衡量和追蹤頁面效能
延遲載入
延遲載入匯入的函式庫和 React 元件，以提升應用程式的整體載入效能。
檢測
瞭解如何在 Next.js 應用程式中使用檢測在伺服器啟動時執行程式碼
OpenTelemetry
瞭解如何使用 OpenTelemetry 檢測 Next.js 應用程式。
第三方函式庫
使用 `@next/third-parties` 套件最佳化應用程式中第三方函式庫的效能。
這有幫助嗎？