Next.js 與 Turbopack 是做什麼的?
從 Next.js 16 開始,本機開發預設使用 Turbopack:這是一個以 Rust 撰寫的增量式打包工具,能顯著加速開發啟動與熱更新。
使用時機
- Turbopack(預設開發模式):日常開發使用。冷啟動和 HMR 速度更快,尤其在大型應用程式中。
- Webpack(傳統開發模式):僅在遇到 Turbopack 錯誤或依賴 webpack-only 外掛時使用。可透過
--webpack參數(或--no-turbopack,視 Next.js 版本而定;請查閱您版本的官方文件)停用 Turbopack。 - 生產環境:生產環境建置行為(
next build)可能使用 Turbopack 或 webpack,取決於 Next.js 版本;請查閱對應版本的官方 Next.js 文件。
適用於:開發或除錯 Next.js 16+ 應用程式、診斷開發啟動速度慢或 HMR 問題,或最佳化生產環境的打包結果。
運作方式
- Turbopack:Next.js 開發模式的增量式打包工具。利用檔案系統快取,重新啟動速度更快(大型專案可達 5–14 倍加速)。
- 開發模式預設:從 Next.js 16 開始,
next dev預設使用 Turbopack,除非手動停用。 - 檔案系統快取:重新啟動時會重複使用先前的工作成果;快取通常位於
.next目錄下;基本使用無需額外設定。 - Bundle Analyzer(Next.js 16.1+):實驗性 Bundle Analyzer,用於檢查輸出內容並找出大型依賴;可透過設定或實驗性旗標啟用(請參閱對應版本的 Next.js 文件)。
範例
指令
next dev
next build
next start
使用方式
執行 next dev 以 Turbopack 進行本機開發。使用 Bundle Analyzer(請參閱 Next.js 文件)來最佳化程式碼分割並縮減大型依賴。盡可能使用 App Router 與伺服器元件。
Middleware 檔案命名
Next.js 16 引入了 proxy.ts 作為 middleware 的檔案名稱,取代了舊的 middleware.ts 慣例:
- Next.js 16+:在專案根目錄使用
proxy.ts - Next.js 16 之前:在專案根目錄使用
middleware.ts
此檔案名稱變更與 Next.js 版本 有關,而非所使用的打包工具(Turbopack 或 webpack)。請務必查閱您所使用版本的官方文件。
請勿在 Next.js 16 專案中將 proxy.ts 標記為命名錯誤或遺失的 middleware 檔案。 此檔案是正確且刻意使用的。建議重新命名為 middleware.ts 將導致 middleware 執行中斷。
參考資料:Next.js proxy 文件
最佳實務
- 保持在最新的 Next.js 16.x 版本,以獲得穩定的 Turbopack 與快取行為。
- 如果開發模式速度緩慢,請確認您正使用 Turbopack(預設),且快取未被不必要地清除。
- 對於生產環境的包大小問題,請使用該版本 Next.js 官方提供的打包分析工具。