生產環境檢查清單
在將 Next.js 應用程式部署至生產環境前，您應考慮實作一些優化措施與模式，以獲得最佳的使用者體驗、效能與安全性。
本頁面提供最佳實踐指南，您可以在開發應用程式、上線前與部署後作為參考，同時也列出您應了解的Next.js 自動優化功能。
自動優化
以下 Next.js 優化功能預設啟用且無需配置：
- 程式碼分割 (Code-splitting): Next.js 會自動依頁面分割應用程式程式碼，確保導航時僅載入當前頁面所需程式碼。您也可視情況延遲載入 (lazy loading)第三方函式庫。
- 預取 (Prefetching): 當使用者的視窗內出現新路由連結時，Next.js 會在背景預取該路由，使導航幾乎瞬間完成。您可視情況停用此功能。
- 自動靜態優化 (Automatic Static Optimization): 若頁面無需阻塞式資料請求，Next.js 會自動判定其為靜態頁面（可預先渲染）。優化後的頁面可被快取，並從多個 CDN 節點提供給終端使用者。您可視需求啟用伺服器端渲染 (Server-side Rendering)。
這些預設設定旨在提升應用程式效能，並減少每次網路請求的資料傳輸量與成本。
開發期間
在開發應用程式時，我們建議使用以下功能以確保最佳效能與使用者體驗：
路由與渲染
<Link>元件: 使用<Link>元件實現客戶端導航與預取功能。- 自訂錯誤頁面 (Custom Errors): 妥善處理 500 與 404 錯誤。
資料獲取與快取
- API 路由 (API Routes): 使用路由處理器存取後端資源，避免敏感資訊暴露至客戶端。
- 資料快取 (Data Caching): 確認您的資料請求是否被快取，並在適當時啟用快取。確保未使用
getStaticProps的請求也能在適當情況下被快取。 - 增量靜態再生 (Incremental Static Regeneration): 使用增量靜態再生在建置後更新靜態頁面，無需重新建置整個網站。
- 靜態圖片 (Static Images): 使用
public目錄自動快取應用程式的靜態資源（例如圖片）。
UI 與無障礙性
- 字體模組 (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) 等程式碼注入攻擊。
元資料與 SEO
<Head>元件: 使用next/head元件新增頁面標題、描述等資訊。
型別安全
- TypeScript 與 TS 插件: 使用 TypeScript 與其插件提升型別安全，及早發現錯誤。
上線前
在上線前，您可以執行 next build 在本機建置應用程式並捕捉建置錯誤，接著執行 next start 在類生產環境中測量應用程式效能。
核心網頁指標
- Lighthouse: 在無痕模式下執行 Lighthouse，更深入理解使用者體驗並找出改進點。此為模擬測試，應搭配實際數據（如核心網頁指標）一同檢視。
分析套件
使用 @next/bundle-analyzer 插件 分析 JavaScript 套件大小，識別可能影響效能的大型模組與相依套件。
此外，以下工具可協助您了解新增相依套件對應用程式的影響：
部署後
根據部署環境的不同，您可能擁有額外的工具與整合功能來監控與改善應用程式效能。
若部署於 Vercel，我們建議以下工具：
- Analytics: 內建分析儀表板，協助您了解應用程式流量，包含獨立訪客數、頁面瀏覽量等數據。
- Speed Insights: 基於實際訪客資料的效能洞察，提供網站實際表現的實用視圖。
- Logging: 執行時期與活動日誌協助除錯與監控生產環境中的應用程式。另可參閱整合頁面取得第三方工具與服務清單。
須知事項:
要全面了解 Vercel 生產環境部署的最佳實踐，包含提升網站效能的詳細策略，請參閱 Vercel 生產檢查清單。
遵循這些建議將協助您為使用者打造更快速、可靠且安全的應用程式。