優化
Next.js 提供了多種內建最佳化功能，旨在提升應用程式速度和 核心網頁指標 (Core Web Vitals)。本指南將介紹您可以利用的最佳化方法來增強使用者體驗。
內建元件
內建元件抽象化了實作常見 UI 最佳化的複雜性。這些元件包括：
- 圖片 (Images)：基於原生
<img>元素。圖片元件透過延遲載入和根據裝置尺寸自動調整圖片大小來最佳化圖片效能。 - 連結 (Link)：基於原生
<a>標籤。連結元件會在背景預先載入頁面，實現更快更流暢的頁面轉換。 - 腳本 (Scripts)：基於原生
<script>標籤。腳本元件讓您能控制第三方腳本的載入與執行。
元資料 (Metadata)
元資料能幫助搜尋引擎更好地理解您的內容（從而提升 SEO 效果），並允許您自訂內容在社交媒體上的呈現方式，幫助您在各平台上創造更具吸引力且一致的使用者體驗。
Next.js 中的 Head 元件允許您修改頁面的 <head>。詳情請參閱 Head 元件 文件。
靜態資源 (Static Assets)
Next.js 的 /public 資料夾可用於提供靜態資源，例如圖片、字型和其他檔案。/public 中的檔案還可由 CDN 供應商快取，以實現高效傳遞。
分析與監控 (Analytics and Monitoring)
對於大型應用程式，Next.js 整合了熱門的分析與監控工具，幫助您了解應用程式的表現。詳情請參閱 分析 (Analytics)、 OpenTelemetry、 和 Instrumentation 指南。
圖片
使用內建的 `next/image` 元件來最佳化您的圖片。
字體
使用內建的 `next/font` 載入器來優化應用程式的網頁字體。
腳本
使用內建的 Script 元件來優化第三方腳本。
靜態資源
Next.js 允許您在 public 目錄中提供靜態檔案，例如圖片。您可以在這裡了解其運作方式。
套件分析工具 (Bundle Analyzer)
使用 @next/bundle-analyzer 插件分析您的 JavaScript 套件大小。
分析
使用 Next.js Speed Insights 測量與追蹤頁面效能
延遲載入 (Lazy Loading)
透過延遲載入 (lazy load) 導入的函式庫和 React 元件來提升應用程式的載入效能。
儀器化 (Instrumentation)
了解如何在 Next.js 應用程式中使用 儀器化 (Instrumentation) 在伺服器啟動時執行程式碼
OpenTelemetry
了解如何使用 OpenTelemetry 為您的 Next.js 應用程式進行儀器化監控。
第三方函式庫
使用 `@next/third-parties` 套件來優化應用程式中的第三方函式庫效能。