優化
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 目錄中提供靜態檔案，例如圖片。您可以在這裡了解其運作方式。
延遲載入 (Lazy Loading)
透過延遲載入導入的函式庫和 React 元件來提升應用程式的載入效能。
分析工具
使用 Next.js Speed Insights 測量與追蹤頁面效能
OpenTelemetry
了解如何使用 OpenTelemetry 為您的 Next.js 應用程式進行儀器化監控。
儀表化 (Instrumentation)
了解如何在 Next.js 應用程式中使用儀表化 (instrumentation) 來在伺服器啟動時執行程式碼
測試
學習如何設定 Next.js 與三種常用測試工具 — Cypress、Playwright、Jest 和 React Testing Library。