跳到內容
App Router建置您的應用程式最佳化

最佳化

Next.js 內建多種最佳化功能，旨在提升應用程式的速度和 Core Web Vitals。本指南將涵蓋您可以利用的最佳化功能，以提升使用者體驗。

內建元件

內建元件簡化了實作常見 UI 最佳化的複雜性。這些元件包括：

  • 圖片：建置於原生 <img> 元素之上。「圖片元件」透過延遲載入和根據裝置尺寸自動調整圖片大小來最佳化圖片效能。
  • 連結：建置於原生 <a> 標籤之上。「連結元件」會在背景中預先提取頁面，以實現更快、更流暢的頁面轉換。
  • 指令碼：建置於原生 <script> 標籤之上。「指令碼元件」讓您可以控制第三方指令碼的載入和執行。

Metadata

Metadata 可協助搜尋引擎更瞭解您的內容 (這可以帶來更好的 SEO)，並讓您自訂內容在社群媒體上的呈現方式，協助您在各種平台上建立更具吸引力且一致的使用者體驗。

Next.js 中的 Metadata API 可讓您修改頁面的 <head> 元素。您可以使用兩種方式設定 metadata：

此外，您可以使用 JSX 和 CSS 以及 imageResponse 建構函式建立動態 Open Graph 圖片。

靜態資源

Next.js /public 資料夾可用於提供靜態資源，例如圖片、字型和其他檔案。/public 內的檔案也可以由 CDN 提供者快取，以便有效率地傳遞。

分析和監控

對於大型應用程式，Next.js 與熱門的分析和監控工具整合，以協助您瞭解應用程式的效能。在 OpenTelemetry 和 檢測 指南中瞭解更多資訊。

圖片

使用內建的 `next/image` 元件最佳化您的圖片。

影片

在您的 Next.js 應用程式中最佳化影片的建議和最佳實務。

字型

使用內建的 `next/font` 載入器最佳化應用程式的網頁字型。

Metadata

使用 Metadata API 在任何版面配置或頁面中定義 metadata。

指令碼

使用內建的 Script 元件最佳化第三方指令碼。

套件捆綁

瞭解如何最佳化應用程式的伺服器和用戶端捆綁包。

延遲載入

延遲載入匯入的函式庫和 React 元件，以提升應用程式的載入效能。

分析

使用 Next.js Speed Insights 衡量和追蹤頁面效能

檢測

瞭解如何在 Next.js 應用程式中使用檢測功能在伺服器啟動時執行程式碼

OpenTelemetry

瞭解如何使用 OpenTelemetry 檢測您的 Next.js 應用程式。

靜態資源

Next.js 可讓您在 public 目錄中提供靜態檔案，例如圖片。您可以在此處瞭解其運作方式。

第三方函式庫

使用 `@next/third-parties` 套件最佳化應用程式中第三方函式庫的效能。

記憶體用量

最佳化應用程式在開發和生產環境中使用的記憶體。