跳到內容
建置您的應用程式部署生產檢查清單

生產檢查清單

在將您的 Next.js 應用程式投入生產環境之前，有一些最佳化和模式您應該考慮實作，以獲得最佳的使用者體驗、效能和安全性。

本頁面提供最佳實務，您可以在建置應用程式期間、上線前和部署後作為參考，以及您應該注意的Next.js 自動最佳化。

自動最佳化

這些 Next.js 最佳化預設為啟用，無需設定

  • 伺服器組件： Next.js 預設使用伺服器組件。伺服器組件在伺服器上執行，並且不需要 JavaScript 即可在用戶端上渲染。因此，它們不會影響您的用戶端 JavaScript 捆綁包的大小。然後，您可以根據需要使用用戶端組件進行互動。
  • 程式碼分割： 伺服器組件啟用依路由區段自動程式碼分割。您也可以考慮在適當情況下延遲載入用戶端組件和第三方函式庫。
  • 預先抓取： 當新路由的連結進入使用者的視口時，Next.js 會在背景中預先抓取路由。這使得導航到新路由幾乎是即時的。您可以在適當情況下選擇退出預先抓取。
  • 靜態渲染： Next.js 在建置時在伺服器上靜態渲染伺服器和用戶端組件，並快取渲染結果以提高應用程式的效能。您可以在適當情況下選擇動態渲染用於特定路由。
  • 快取： Next.js 快取資料請求、伺服器和用戶端組件的渲染結果、靜態資源等等，以減少對伺服器、資料庫和後端服務的網路請求數量。您可以在適當情況下選擇退出快取。

這些預設旨在提高應用程式的效能，並減少每次網路請求的成本和資料傳輸量。

開發期間

在建置應用程式時，我們建議使用以下功能以確保最佳效能和使用者體驗

路由與渲染

要知道的好資訊： 部分預先渲染 (實驗性功能) 將允許路由的部分是動態的，而無需使整個路由都選擇加入動態渲染。

資料抓取與快取

  • 伺服器組件： 利用伺服器組件在伺服器上抓取資料的優勢。
  • 路由處理器： 使用路由處理器從用戶端組件存取您的後端資源。但不要從伺服器組件呼叫路由處理器，以避免額外的伺服器請求。
  • 串流： 使用載入 UI 和 React Suspense 從伺服器逐步將 UI 發送到用戶端，並防止整個路由在抓取資料時被阻止。
  • 平行資料抓取： 在適當情況下平行抓取資料，以減少網路瀑布流。此外，在適當情況下考慮預先載入資料。
  • 資料快取： 驗證您的資料請求是否正在被快取，並在適當情況下選擇加入快取。確保未使用 fetch 的請求被快取。
  • 靜態圖片： 使用 public 目錄自動快取應用程式的靜態資源，例如圖片。

UI 與可訪問性

  • 表單和驗證： 使用伺服器動作處理表單提交、伺服器端驗證和處理錯誤。
  • 字體模組： 透過使用字體模組來最佳化字體，該模組會自動將您的字體檔案與其他靜態資源一起託管、移除外部網路請求，並減少版面配置偏移。
  • <Image> 組件： 透過使用圖片組件來最佳化圖片，該組件會自動最佳化圖片、防止版面配置偏移，並以現代格式（如 WebP）提供圖片。
  • <Script> 組件： 透過使用指令碼組件來最佳化第三方指令碼，該組件會自動延遲指令碼並防止它們阻止主執行緒。
  • ESLint： 使用內建的 eslint-plugin-jsx-a11y 外掛程式來儘早捕獲可訪問性問題。

安全性

  • 汙染： 透過汙染資料物件和/或特定值，防止敏感資料暴露給用戶端。
  • 伺服器動作： 確保使用者被授權呼叫伺服器動作。查看建議的安全性實務。
  • 環境變數： 確保您的 .env.* 檔案已新增至 .gitignore，並且只有公開變數以 NEXT_PUBLIC_ 為前綴。
  • 內容安全策略： 考慮新增內容安全策略，以保護您的應用程式免受各種安全威脅，例如跨網站指令碼、點擊劫持和其他程式碼注入攻擊。

Metadata 與 SEO

  • Metadata API： 使用 Metadata API 透過新增頁面標題、描述等來改善應用程式的搜尋引擎最佳化 (SEO)。
  • Open Graph (OG) 圖片： 建立 OG 圖片以準備您的應用程式進行社群分享。
  • 網站地圖和 Robots： 透過產生網站地圖和 robots 檔案，協助搜尋引擎抓取和索引您的頁面。

類型安全

  • TypeScript 和 TS 外掛程式： 使用 TypeScript 和 TypeScript 外掛程式以獲得更好的類型安全，並協助您儘早捕獲錯誤。

上線前

在上線前，您可以執行 next build 在本機建置您的應用程式並捕獲任何建置錯誤，然後執行 next start 來衡量您的應用程式在類似生產環境中的效能。

Core Web Vitals

  • Lighthouse： 在無痕模式下執行 Lighthouse，以更好地了解您的使用者將如何體驗您的網站，並找出需要改進的區域。這是一個模擬測試，應與查看現場資料（例如 Core Web Vitals）相結合。

分析捆綁

使用 @next/bundle-analyzer 外掛程式來分析您的 JavaScript 捆綁包的大小，並找出可能影響應用程式效能的大型模組和依賴項。

此外，以下工具可以幫助您了解新增依賴項對應用程式的影響

部署後

根據您部署應用程式的位置，您可能有權存取其他工具和整合，以幫助您監控和改善應用程式的效能。

對於 Vercel 部署，我們建議以下內容

  • 分析： 內建分析儀表板，可協助您了解應用程式的流量，包括不重複訪客數、頁面瀏覽量等。
  • 速度洞察： 基於訪客資料的真實世界效能洞察，提供您的網站現場效能的實用視圖。
  • 記錄： 執行階段和活動記錄，可協助您偵錯問題並在生產環境中監控應用程式。或者，請參閱整合頁面，以取得第三方工具和服務的清單。

要知道的好資訊

若要全面了解 Vercel 上生產部署的最佳實務，包括改善網站效能的詳細策略，請參閱Vercel 生產檢查清單。

遵循這些建議將有助於您為使用者建置更快、更可靠且更安全的應用程式。