最佳化
Next.js 內建多種最佳化功能，旨在提升您的應用程式速度和 核心網頁指標 (Core Web Vitals)。本指南將介紹可運用於增強使用者體驗的最佳化技巧。
內建元件
內建元件抽象化了常見 UI 最佳化的實作複雜度。這些元件包括：
- 圖片 (Images)：基於原生
<img>元素。圖片元件透過延遲載入和根據裝置尺寸自動調整圖片大小來最佳化圖片效能。 - 連結 (Link)：基於原生
<a>標籤。連結元件會在背景預先擷取頁面，實現更快速流暢的頁面轉場。 - 腳本 (Scripts)：基於原生
<script>標籤。腳本元件讓您能控制第三方腳本的載入與執行。
元資料 (Metadata)
元資料可協助搜尋引擎更好地理解您的內容（從而提升 SEO 效果），並讓您能自訂內容在社交媒體上的呈現方式，幫助您在各平台建立更具吸引力且一致的使用者體驗。
Next.js 中的元資料 API 允許您修改頁面的 <head> 元素。您可透過兩種方式設定元資料：
- 基於設定的元資料 (Config-based Metadata)：在
layout.js或page.js檔案中匯出靜態 metadata 物件或動態 generateMetadata 函式。 - 基於檔案的元資料 (File-based Metadata)：將靜態或動態生成的特殊檔案加入路由區段。
此外，您還可以使用 imageResponse 建構函式，透過 JSX 和 CSS 建立動態 Open Graph 圖片。
靜態資源 (Static Assets)
Next.js 的 /public 資料夾可用於提供靜態資源，如圖片、字體和其他檔案。/public 內的檔案也可由 CDN 供應商快取，以實現高效傳遞。
分析與監控 (Analytics and Monitoring)
針對大型應用程式，Next.js 整合了熱門的分析與監控工具，協助您了解應用程式的表現。詳情請參閱 OpenTelemetry 以及 檢測 (Instrumentation) 指南。
圖片
使用內建的 `next/image` 元件來優化您的圖片。
字體
使用內建的 `next/font` 載入器來優化應用程式的網頁字體。
腳本
使用內建的 Script 元件來優化第三方腳本。
元資料 (Metadata)
使用 Metadata API 在任何佈局或頁面中定義元資料。
靜態資源
Next.js 允許您在 public 目錄中提供靜態檔案，例如圖片。您可以在這裡了解其運作方式。
延遲載入 (Lazy Loading)
透過延遲載入導入的函式庫和 React 元件來提升應用程式的載入效能。
分析工具
使用 Next.js Speed Insights 測量與追蹤頁面效能
OpenTelemetry
學習如何為您的 Next.js 應用程式加入 OpenTelemetry 監控。
Instrumentation
了解如何使用 instrumentation 在 Next.js 應用程式伺服器啟動時執行程式碼