跳至內容
頁面路由器建置您的應用程式優化

優化

Next.js 提供各種內建優化，旨在提高應用程式的速度和核心網頁指標。本指南將涵蓋您可以利用的優化，以增強使用者體驗。

內建組件

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

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

詮釋資料

詮釋資料可協助搜尋引擎更好地理解您的內容（進而改善 SEO），並允許您自訂內容在社群媒體上的呈現方式，幫助您在各種平台上建立更具吸引力和一致的使用者體驗。

Next.js 中的 Head 元件允許您修改頁面的 <head> 部分。在Head 元件文件中了解更多資訊。

靜態資源 分析和監控

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

圖片

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

字體

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

腳本

使用內建的 Script 元件來最佳化第三方腳本。

靜態資源

Next.js 允許您在 public 資料夾中提供靜態檔案，例如圖片。您可以在這裡了解它的運作方式。

打包

了解如何最佳化您的應用程式伺服器和客戶端套件。

分析

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

延遲載入

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

程式碼植入

了解如何在您的 Next.js 應用程式中使用程式碼植入技術在伺服器啟動時執行程式碼。

OpenTelemetry

了解如何使用 OpenTelemetry 對您的 Next.js 應用程式進行程式碼植入。

第三方函式庫

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