生產環境檢查清單

在將 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 錯誤。
組合模式 (Composition Patterns): 遵循伺服器與客戶端元件的建議組合模式，並檢查 "use client" 邊界的放置位置，避免不必要地增加客戶端 JavaScript 套件大小。
動態函式 (Dynamic Functions): 注意如 cookies() 與 searchParams 屬性等動態函式會使整個路由（若用於根版面配置 (Root Layout)則為整個應用程式）轉為動態渲染 (Dynamic Rendering)。確保動態函式的使用是刻意為之，並在適當情況下以 <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 或 AVIF 等現代格式提供。
<Script> 元件: 使用 Script 元件優化第三方腳本，該元件會自動延遲載入腳本，避免阻塞主執行緒。
ESLint: 使用內建的 eslint-plugin-jsx-a11y 插件及早發現無障礙性問題。

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