如何為生產環境優化 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> 元件: 使用 Image 元件優化圖片，該元件會自動優化圖片、防止版面偏移，並以 WebP 等現代格式提供圖片。
<Script> 元件: 使用 Script 元件優化第三方腳本，該元件會自動延遲腳本並防止它們阻塞主執行緒。
ESLint: 使用內建的 eslint-plugin-jsx-a11y 插件早期捕捉無障礙性問題。

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

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

Lighthouse: 在無痕模式下執行 Lighthouse，更好地了解使用者將如何體驗您的網站，並識別需要改進的地方。這是一個模擬測試，應該與查看實際資料（如核心網路指標）相結合。

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

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