生產檢查清單
在將您的 Next.js 應用程式投入生產環境之前，有些最佳化和模式您應考慮實作，以獲得最佳的使用者體驗、效能和安全性。
本頁面提供最佳實務，您可以在建置應用程式時、在進入生產環境之前和部署後作為參考 - 以及您應注意的Next.js 自動最佳化。
自動最佳化
這些 Next.js 最佳化預設為啟用，且無需設定
- 程式碼分割： Next.js 會依頁面自動程式碼分割您的應用程式碼。這表示只有目前頁面所需的程式碼會在導航時載入。您也可以考慮延遲載入第三方函式庫（在適當情況下）。
- 預先擷取： 當新路由的連結進入使用者的視口時，Next.js 會在背景中預先擷取路由。這使得導航到新路由幾乎是即時的。在適當情況下，您可以選擇退出預先擷取。
- 自動靜態最佳化： 如果頁面沒有封鎖資料需求，Next.js 會自動判斷該頁面是靜態的（可以預先渲染）。最佳化後的頁面可以快取，並從多個 CDN 位置提供給終端使用者。在適當情況下，您可以選擇伺服器端渲染。
這些預設旨在改善您應用程式的效能，並減少每次網路請求的成本和資料傳輸量。
開發期間
在建置應用程式時，我們建議使用以下功能以確保最佳效能和使用者體驗
路由和渲染
資料抓取和快取
- API 路由： 使用路由處理器存取您的後端資源，並防止敏感機密暴露給客戶端。
- 資料快取： 確認您的資料請求是否正在快取，並在適當情況下選擇加入快取。確保未使用
getStaticProps的請求在適當情況下進行快取。 - 遞增靜態再生： 使用遞增靜態再生在靜態頁面建置後更新它們，而無需重建整個網站。
- 靜態圖片： 使用
public目錄自動快取您應用程式的靜態資源，例如圖片。
UI 和協助工具
- 字體模組： 使用字體模組最佳化字體，該模組會自動託管您的字體檔案和其他靜態資源，移除外部網路請求，並減少版面配置偏移。
<Image>元件： 使用圖片元件最佳化圖片，該元件會自動最佳化圖片、防止版面配置偏移，並以現代格式（如 WebP）提供它們。<Script>元件： 使用腳本元件最佳化第三方腳本，該元件會自動延遲腳本並防止它們封鎖主線程。- ESLint： 使用內建的
eslint-plugin-jsx-a11y外掛程式及早發現協助工具問題。
安全性
- 環境變數： 確保您的
.env.*檔案已新增至.gitignore，並且只有公開變數才以NEXT_PUBLIC_作為前綴。 - 內容安全策略： 考慮新增內容安全策略，以保護您的應用程式免受各種安全威脅，例如跨網站指令碼、點擊劫持和其他程式碼注入攻擊。
Metadata 和 SEO
<Head>元件： 使用next/head元件新增頁面標題、描述等。
類型安全
- TypeScript 和 TS 外掛程式： 使用 TypeScript 和 TypeScript 外掛程式以獲得更好的類型安全，並幫助您及早發現錯誤。
在進入生產環境之前
在進入生產環境之前，您可以執行 next build 以在本機建置您的應用程式並捕獲任何建置錯誤，然後執行 next start 以在類似生產環境中衡量您應用程式的效能。
Core Web Vitals
- Lighthouse： 在無痕模式下執行 Lighthouse 以更好地了解您的使用者將如何體驗您的網站，並找出需要改進的領域。這是一個模擬測試，應與查看現場資料（例如 Core Web Vitals）相結合。
分析捆綁
使用 @next/bundle-analyzer 外掛程式分析您的 JavaScript 捆綁大小，並找出可能影響您應用程式效能的大型模組和依賴項。
此外，以下工具可以幫助您了解將新依賴項新增至應用程式的影響
部署後
根據您部署應用程式的位置，您可能有權存取其他工具和整合，以幫助您監控和改善應用程式的效能。
對於 Vercel 部署，我們建議以下項目
- 分析： 一個內建的分析儀表板，可幫助您了解應用程式的流量，包括不重複訪客數、頁面瀏覽量等。
- Speed Insights： 基於訪客資料的真實世界效能洞察，提供關於您的網站現場效能的實用視圖。
- 記錄： 執行階段和活動記錄，以幫助您除錯問題並在生產環境中監控您的應用程式。或者，請參閱整合頁面以取得第三方工具和服務的清單。
要知道的好資訊
若要全面了解 Vercel 上生產部署的最佳實務，包括改善網站效能的詳細策略，請參閱Vercel 生產檢查清單。
遵循這些建議將幫助您為使用者建置更快、更可靠和更安全的應用程式。
這有幫助嗎？