最佳化
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.js 應用程式中優化影片的建議與最佳實踐。
字型
使用內建的 `next/font` 載入器來優化應用程式的網頁字型。
元數據
使用 Metadata API 在任何佈局或頁面中定義元數據。
腳本
使用內建的 Script 元件來優化第三方腳本。
套件分析工具 (Bundle Analyzer)
使用 @next/bundle-analyzer 插件分析您的 JavaScript 套件大小。
延遲載入 (Lazy Loading)
透過延遲載入導入的函式庫和 React 元件來提升應用程式的載入效能。
分析
使用 Next.js Speed Insights 測量與追蹤頁面效能
儀器化 (Instrumentation)
了解如何使用儀器化在 Next.js 應用程式的伺服器啟動時執行程式碼
OpenTelemetry
了解如何使用 OpenTelemetry 為您的 Next.js 應用程式進行檢測。
靜態資源
Next.js 允許您在 public 目錄中提供靜態檔案，例如圖片。您可以在這裡了解其運作方式。
第三方函式庫
使用 `@next/third-parties` 套件來優化應用程式中的第三方函式庫效能。
記憶體使用量
最佳化應用程式在開發與生產環境中的記憶體使用情況。