如何最佳化您的 Next.js 應用程式以用於生產環境
在將您的 Next.js 應用程式投入生產之前，您應該考慮實施一些最佳化和模式，以獲得最佳的使用者體驗、效能和安全性。
本頁提供了在構建應用程式和投入生產之前可供參考的最佳實踐，以及您應該瞭解的Next.js 自動最佳化。
自動最佳化
這些 Next.js 最佳化預設啟用，無需配置
- 程式碼拆分： Next.js 會自動按頁面拆分您的應用程式程式碼。這意味著導航時只加載當前頁面所需的程式碼。您也可以考慮在適當的情況下延遲載入第三方庫。
- 預取： 當指向新路由的連結進入使用者視口時，Next.js 會在後臺預取該路由。這使得導航到新路由幾乎是即時的。您可以在適當的情況下選擇停用預取。
- 自動靜態最佳化： 如果頁面沒有阻塞資料需求，Next.js 會自動確定該頁面是靜態的（可以預渲染）。最佳化的頁面可以被快取，並從多個 CDN 位置提供給終端使用者。您可以在適當的情況下選擇伺服器端渲染。
這些預設設定旨在提高應用程式的效能，並降低每次網路請求傳輸的資料成本和數量。
開發過程中
在構建應用程式時，我們建議使用以下功能以確保最佳效能和使用者體驗
路由和渲染
資料獲取和快取
- API 路由： 使用路由處理程式訪問後端資源，並防止敏感秘密暴露給客戶端。
- 資料快取： 驗證資料請求是否被快取，並在適當的情況下選擇快取。確保不使用
getStaticProps的請求在適當的情況下被快取。 - 增量靜態再生： 使用增量靜態再生在頁面構建後更新靜態頁面，而無需重建整個網站。
- 靜態圖片： 使用
public目錄自動快取應用程式的靜態資產，例如圖片。
UI 和輔助功能
- 字型模組： 透過使用字型模組最佳化字型，該模組自動將您的字型檔案與其他靜態資產一起託管，消除外部網路請求，並減少佈局偏移。
<Image>元件： 透過使用 Image 元件最佳化圖片，該元件自動最佳化圖片，防止佈局偏移，並以 WebP 等現代格式提供圖片。<Script>元件： 透過使用 Script 元件最佳化第三方指令碼，該元件自動延遲指令碼並防止它們阻塞主執行緒。- ESLint： 使用內建的
eslint-plugin-jsx-a11y外掛及早發現輔助功能問題。
安全
- 環境變數： 確保您的
.env.*檔案已新增到.gitignore，並且只有公共變數以NEXT_PUBLIC_為字首。 - 內容安全策略： 考慮新增內容安全策略以保護您的應用程式免受各種安全威脅，例如跨站指令碼、點選劫持和其他程式碼注入攻擊。
元資料和 SEO
<Head>元件： 使用next/head元件新增頁面標題、描述等。
型別安全
- TypeScript 和 TS 外掛： 使用 TypeScript 和 TypeScript 外掛以獲得更好的型別安全性，並幫助您及早發現錯誤。
投入生產之前
在投入生產之前，您可以執行 next build 在本地構建您的應用程式並捕獲任何構建錯誤，然後執行 next start 在類似生產的環境中衡量應用程式的效能。
核心 Web 指標
- Lighthouse： 在隱身模式下執行 Lighthouse，以更好地瞭解使用者如何體驗您的網站，並確定需要改進的領域。這是一個模擬測試，應與檢視現場資料（例如核心 Web Vitals）結合使用。
分析捆綁包
使用 @next/bundle-analyzer 外掛分析 JavaScript 捆綁包的大小，並識別可能影響應用程式效能的大型模組和依賴項。
此外，以下工具可以幫助您瞭解新增新依賴項對應用程式的影響
這有幫助嗎？