如何為生產環境優化您的 Next.js 應用程式
在將 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>元件: 使用圖片元件優化圖片，該元件會自動優化圖片、防止版面位移，並以 WebP 等現代格式提供圖片。<Script>元件: 使用指令碼元件優化第三方指令碼，該元件會自動延遲載入指令碼並防止它們阻塞主執行緒。- ESLint: 使用內建的
eslint-plugin-jsx-a11y外掛程式及早發現無障礙性問題。
安全性
- 環境變數 (Environment Variables): 確保您的
.env.*檔案已加入.gitignore，且只有公開變數以NEXT_PUBLIC_為前綴。 - 內容安全政策 (Content Security Policy): 考慮新增內容安全政策，保護應用程式免受跨站腳本 (XSS)、點擊劫持 (clickjacking) 和其他程式碼注入攻擊等各種安全威脅。
元資料與 SEO
<Head>元件: 使用next/head元件新增頁面標題、描述等。
型別安全
- TypeScript 和 TS 外掛程式: 使用 TypeScript 和 TypeScript 外掛程式獲得更好的型別安全性，並幫助您及早發現錯誤。
投入生產環境前
在投入生產環境前，您可以執行 next build 在本機建置應用程式並捕捉任何建置錯誤，然後執行 next start 在類似生產環境的環境中測量應用程式效能。
核心網頁指標
- Lighthouse: 在無痕模式下執行 Lighthouse，更好地了解使用者體驗您網站的方式，並找出改進空間。這是模擬測試，應與實際資料（如核心網頁指標）結合查看。
分析套件
使用 @next/bundle-analyzer 外掛程式分析 JavaScript 套件的大小，並識別可能影響應用程式效能的大型模組和相依性。
此外，以下工具可幫助您了解新增相依性對應用程式的影響：