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