跳至內容
建置您的應用程式部署上線檢查清單

生產環境檢查清單

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

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

自動優化

這些 Next.js 優化功能預設啟用，無需任何設定。

  • 程式碼分割：Next.js 會依頁面自動分割您的應用程式程式碼。這表示導覽時只會載入目前頁面所需的程式碼。您也可以考慮在適當的情況下延遲載入第三方函式庫。
  • 預先擷取：當新路由的連結進入使用者視埠時，Next.js 會在背景預先擷取該路由。這使得導覽到新路由幾乎是即時的。您可以在適當的情況下選擇停用預先擷取。
  • 自動靜態優化：如果頁面沒有阻擋資料需求，Next.js 會自動判斷該頁面為靜態（可以預先渲染）。優化的頁面可以被快取，並從多個 CDN 位置提供給終端使用者。您也可以在適當的情況下選擇伺服器端渲染。

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

開發期間 路由和渲染

資料擷取和快取 API 路由：使用路由處理程式來存取您的後端資源，並防止敏感機密洩露給客戶端。
  • 資料快取：驗證您的資料請求是否已快取，並在適當的情況下選擇快取。確保未使用的 getStaticProps 請求在適當的情況下已快取。
  • 增量靜態再生 (ISR): 使用增量靜態再生，在建置靜態頁面後更新它們，無需重建整個網站。
  • 靜態圖片: 使用 public 目錄自動快取應用程式的靜態資源，例如圖片。

    • 使用者介面和無障礙

    • 字體模組: 使用字體模組最佳化字體，該模組會自動將您的字體檔案與其他靜態資源一起託管，移除外部網路請求，並減少 版面配置偏移。
    • <Image> 元件: 使用 Image 元件最佳化圖片，它會自動最佳化圖片、防止版面配置偏移，並以 WebP 或 AVIF 等現代格式提供服務。
    • <Script> 元件: 使用 Script 元件最佳化第三方腳本，它會自動延遲腳本執行，並防止它們阻塞主執行緒。
    • ESLint: 使用內建的 eslint-plugin-jsx-a11y 外掛程式及早發現無障礙問題。

    安全性

    • 環境變數: 確保您的 .env.* 檔案已添加到 .gitignore 中，並且只有公開變數以 NEXT_PUBLIC_ 作為前綴。
    • 內容安全策略 (CSP): 考慮新增內容安全策略，以保護您的應用程式免受各種安全威脅，例如跨網站指令碼、點擊劫持和其他程式碼注入攻擊。

    詮釋資料和 SEO

    • <Head> 元件: 使用 next/head 元件新增頁面標題、描述等。

    類型安全

    • TypeScript 與 TS 插件： 使用 TypeScript 和 TypeScript 插件可以提升類型安全，並幫助您及早發現錯誤。

    正式上線前

    在正式上線前，您可以執行 next build 在本地端建置您的應用程式並捕捉任何建置錯誤，然後執行 next start 來評估應用程式在類生產環境中的效能。

    核心網頁指標

    • Lighthouse： 在無痕模式下執行 Lighthouse，可以更了解使用者體驗網站的方式，並找出需要改進的地方。這是一個模擬測試，應該與實際數據（例如核心網頁指標）一起參考。

    分析程式碼套件

    使用 @next/bundle-analyzer 插件 來分析 JavaScript 程式碼套件的大小，並找出可能會影響應用程式效能的大型模組和依賴項。

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

    部署後

    根據您部署應用程式的位置，您可能可以使用額外的工具和整合來協助您監控和改善應用程式的效能。

    對於 Vercel 部署，我們建議以下項目：

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

    注意事項

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

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