正式環境檢查清單

在將您的 Next.js 應用程式上線之前，您應該考慮實作一些最佳化和模式，以獲得最佳的使用者體驗、效能和安全性。

本頁面提供最佳實務，您可以將其作為參考，在建置應用程式、上線前和部署後使用，以及您應該注意的Next.js 自動優化。

自動優化

這些 Next.js 優化預設啟用，無需任何設定。

• 伺服器組件：Next.js 預設使用伺服器組件。伺服器組件在伺服器上運行，不需要 JavaScript 即可在客戶端上渲染。因此，它們不會影響客戶端 JavaScript 捆綁包的大小。您可以根據需要使用客戶端組件來實現互動性。
• 程式碼分割：伺服器組件可依路由區段自動進行程式碼分割。您也可以考慮在適當的情況下延遲載入客戶端組件和第三方函式庫。
• 預取：當指向新路由的連結進入使用者視口時，Next.js 會在背景預取該路由。這使得導航到新路由幾乎是即時的。您可以在適當的情況下選擇停用預取。
• 靜態渲染：Next.js 會在建置時在伺服器上靜態渲染伺服器和客戶端組件，並快取渲染結果以提高應用程式的效能。您可以選擇在適當的情況下為特定路由啟用動態渲染。
• 快取：Next.js 會快取資料請求、伺服器和客戶端組件的渲染結果、靜態資源等等，以減少對伺服器、資料庫和後端服務的網路請求次數。您可以在適當的情況下選擇停用快取。

這些預設值旨在提高應用程式的效能，並降低每次網路請求的成本和傳輸的資料量。

開發期間：使用佈局在頁面之間共用 UI，並在導航時啟用局部渲染。

<Link> 組件：使用 <Link> 組件進行客戶端導航和預取。

錯誤處理：透過建立自訂錯誤頁面，優雅地處理所有錯誤和404 錯誤。

組合模式：遵循伺服器元件和客戶端元件的建議組合模式，並檢查您的"use client" 邊界的位置，以避免不必要地增加客戶端 JavaScript 包的大小。

動態 API：請注意，像 cookies 和 searchParams prop 等動態 API 會將整個路由選擇為動態渲染（如果在根佈局中使用，則會影響整個應用程式）。確保動態 API 的使用是有意的，並在適當的地方將它們包裝在 <Suspense> 邊界內。

小提示：部分預渲染（實驗性）將允許路由的某些部分是動態的，而不會將整個路由選擇為動態渲染。

資料提取和快取

• 伺服器元件：利用伺服器元件在伺服器上提取資料的優勢。
• 路由處理程式：使用路由處理程式從客戶端元件存取您的後端資源。但不要從伺服器元件呼叫路由處理程式，以免產生額外的伺服器請求。
• 串流：使用載入 UI 和 React Suspense 將 UI 從伺服器逐步發送到客戶端，並防止在提取資料時阻塞整個路由。
• 平行資料提取：在適當的情況下，透過平行提取資料來減少網路瀑布。此外，在適當的情況下，考慮預先載入資料。
• 資料快取：驗證您的資料請求是否已快取，並在適當的情況下選擇快取。確保不使用 fetch 的請求已快取。
• 靜態圖片：使用 public 目錄自動快取應用程式的靜態資源，例如圖片。

UI 和無障礙

• 表單與驗證：使用伺服器動作 (Server Actions) 處理表單提交、伺服器端驗證和錯誤處理。

• 字體模組：使用字體模組優化字體，該模組會自動將您的字體檔案與其他靜態資源一起託管，移除外部網路請求，並減少版面偏移。
• <Image> 元件：使用 Image 元件優化圖片，它會自動優化圖片、防止版面偏移，並以 WebP 或 AVIF 等現代格式提供圖片。
• <Script> 元件：使用 Script 元件優化第三方腳本，它會自動延遲腳本執行，並防止它們阻塞主執行緒。
• ESLint：使用內建的 eslint-plugin-jsx-a11y 外掛程式及早發現無障礙問題。

安全性

• 資料汙染 (Tainting)：透過汙染資料物件和／或特定值，防止敏感資料暴露給用戶端。
• 伺服器動作 (Server Actions)：確保使用者獲得授權才能呼叫伺服器動作。檢閱建議的安全性實務。

• 環境變數：確保您的 .env.* 檔案已新增至 .gitignore，並且只有公開變數以 NEXT_PUBLIC_ 作為前綴。
• 內容安全策略 (CSP)：考慮新增內容安全策略，以保護您的應用程式免受各種安全威脅，例如跨網站指令碼、點擊劫持和其他程式碼注入攻擊。

詮釋資料和 SEO

• 詮釋資料 API：使用詮釋資料 API，透過新增頁面標題、描述等方式來改善應用程式的搜尋引擎最佳化 (SEO)。
• Open Graph (OG) 圖片：建立 OG 圖片，讓您的應用程式做好社群分享的準備。
• 網站地圖 和 robots.txt： 透過產生網站地圖和 robots.txt 檔案，協助搜尋引擎爬取和索引您的網頁。

類型安全

• TypeScript 和 TS 插件： 使用 TypeScript 和 TypeScript 插件可以提高類型安全，並協助您及早發現錯誤。

上線前準備

在正式上線之前，您可以執行 next build 在本地端建置您的應用程式並捕捉任何建置錯誤，然後執行 next start 以在類似正式環境中測量應用程式的效能。

核心網頁指標

• Lighthouse： 在無痕模式下執行 Lighthouse，可以更了解使用者體驗網站的方式，並找出需要改進的地方。這是一個模擬測試，應搭配實際數據（例如核心網頁指標）一起參考。

• useReportWebVitals hook： 使用此 hook 將 核心網頁指標 數據傳送到分析工具。

分析程式碼套件

使用 @next/bundle-analyzer 插件 分析 JavaScript 程式碼套件的大小，並找出可能影響應用程式效能的大型模組和依賴項。

此外，以下工具可以協助您了解新增依賴項對應用程式的影響

• 導入成本
• Package Phobia（套件大小恐懼症）
• Bundle Phobia（打包檔案大小恐懼症）
• bundlejs

部署後

根據您部署應用程式的位置，您可能可以使用額外的工具和整合來協助您監控和改善應用程式的效能。

對於 Vercel 部署，我們建議以下項目

• 分析：內建的分析儀表板，可協助您了解應用程式的流量，包括不重複訪客數、網頁瀏覽量等等。
• 速度洞察：基於訪客數據的真實世界效能洞察，提供網站實際運作效能的實用視圖。
• 日誌記錄：執行階段和活動日誌，可協助您在正式環境中偵錯問題並監控應用程式。或者，請參閱整合頁面以取得第三方工具和服務的清單。

💡 貼心小提醒

想全面了解 Vercel 上最佳的生產環境部署實務，包括提升網站效能的詳細策略，請參閱 Vercel 生產環境檢查清單。

遵循這些建議將有助於您為使用者打造更快、更可靠且更安全的應用程式。