如何優化 Next.js 應用程式以投入生產環境

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

本頁提供最佳實踐，可作為您在開發應用程式和投入生產環境前的參考，以及您應該了解的Next.js 自動優化。

自動優化

以下 Next.js 優化功能預設啟用且無需配置：

伺服器元件 (Server Components): Next.js 預設使用伺服器元件。伺服器元件在伺服器端執行，無需客戶端 JavaScript 即可渲染，因此不會影響客戶端 JavaScript 套件的大小。您可視需要使用客戶端元件 (Client Components)來實現互動功能。
程式碼分割 (Code-splitting): 伺服器元件能按路由區段自動進行程式碼分割。您也可考慮在適當情況下延遲載入 (lazy loading)客戶端元件和第三方函式庫。
預取 (Prefetching): 當使用者視窗中出現新路由連結時，Next.js 會在背景預取該路由，使導航幾乎瞬間完成。您可在適當情況下選擇停用預取功能。
靜態渲染 (Static Rendering): Next.js 會在建置時於伺服器端靜態渲染伺服器和客戶端元件，並快取渲染結果以提升應用程式效能。您可視需要為特定路由選擇動態渲染 (Dynamic Rendering)。
快取 (Caching): Next.js 會快取資料請求、伺服器和客戶端元件的渲染結果、靜態資源等，以減少對伺服器、資料庫和後端服務的網路請求。您可在適當情況下選擇停用快取。

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

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

佈局 (Layouts): 使用佈局來跨頁面共享 UI，並啟用導航時的部分渲染 (partial rendering)。
<Link> 元件: 使用 <Link> 元件實現客戶端導航和預取 (client-side navigation and prefetching)。
錯誤處理 (Error Handling): 透過建立自訂錯誤頁面，優雅地處理生產環境中的全域錯誤 (catch-all errors)和404 錯誤。
客戶端與伺服器元件 (Client and Server Components): 遵循伺服器和客戶端元件的推薦組合模式，並檢查您的"use client" 邊界 (boundaries)位置，避免不必要地增加客戶端 JavaScript 套件大小。
動態 API (Dynamic APIs): 請注意，像 cookies 和 searchParams 屬性這類動態 API 會將整個路由切換為動態渲染 (Dynamic Rendering)（若在根佈局 (Root Layout)中使用，則會影響整個應用程式）。確保動態 API 的使用是經過深思熟慮的，並在適當情況下用 <Suspense> 邊界包裝它們。

須知: 部分預渲染 (Partial Prerendering)（實驗性功能）將允許路由的部分內容保持動態，而無需將整個路由切換為動態渲染。

伺服器元件 (Server Components): 利用伺服器元件在伺服器端獲取資料的優勢。
路由處理器 (Route Handlers): 使用路由處理器從客戶端元件存取後端資源。但請勿從伺服器元件呼叫路由處理器，以避免額外的伺服器請求。
串流 (Streaming): 使用載入 UI 和 React Suspense 逐步從伺服器向客戶端發送 UI，防止整個路由在資料獲取時被阻塞。
平行資料獲取 (Parallel Data Fetching): 在適當情況下透過平行獲取資料來減少網路瀑布流。同時，可考慮在適當情況下預載資料 (preloading data)。
資料快取 (Data Caching): 驗證您的資料請求是否被快取，並在適當情況下選擇啟用快取。確保不使用 fetch 的請求被快取。
靜態圖片 (Static Images): 使用 public 目錄自動快取應用程式的靜態資源，例如圖片。

字體模組 (Font Module): 使用字體模組優化字體，該模組會自動將您的字體檔案與其他靜態資源一起託管，移除外部網路請求並減少版面位移 (layout shift)。
<Image> 元件: 使用圖片元件優化圖片，該元件會自動優化圖片、防止版面位移，並以 WebP 等現代格式提供圖片。
<Script> 元件: 使用指令碼元件優化第三方指令碼，該元件會自動延遲載入指令碼並防止它們阻塞主執行緒。
ESLint: 使用內建的 eslint-plugin-jsx-a11y 外掛程式及早發現無障礙性問題。

環境變數 (Environment Variables): 確保您的 .env.* 檔案已加入 .gitignore，且只有公開變數以 NEXT_PUBLIC_ 為前綴。
內容安全政策 (Content Security Policy): 考慮新增內容安全政策，保護應用程式免受跨站腳本 (XSS)、點擊劫持 (clickjacking) 和其他程式碼注入攻擊等各種安全威脅。

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

Lighthouse: 在無痕模式下執行 Lighthouse，更好地了解使用者體驗您網站的方式，並找出改進空間。這是模擬測試，應與實際資料（如核心網頁指標）結合查看。

使用 @next/bundle-analyzer 外掛程式分析 JavaScript 套件的大小，並識別可能影響應用程式效能的大型模組和相依性。

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