Vinext 1.0：Next.js 建置改用 Vite
Cloudflare blog · 2026-09-28
Next.js 應用程式現在可以直接建置在 Vite 之上，不必再綁死 webpack 或 Turbopack。Cloudflare 在 2026 年 9 月 28 日發布 Vinext 1.0，讓 App Router 與 Pages Router 寫成的 Next.js 應用改跑在 Vite 建置鏈上，並可部署到 Cloudflare Workers、Netlify、AWS Lambda 等原本非官方支援的平台。
背景
Next.js 內建的建置系統長期綁定 webpack（近年逐步換成 Turbopack），這條建置鏈與 Vercel 的部署模型高度耦合，想把 Next.js 應用搬到 Vercel 以外的執行環境並不直接，也無法使用 Vite 生態系的外掛。想在 Cloudflare Workers、Netlify 或 AWS Lambda 上跑 Next.js，過去得靠各家自行維護的相容層去模擬 webpack 產出的執行期行為，任何 Next.js 版本更新都可能讓相容層落後。
Vinext 從實驗性專案畢業到 1.0，代表的不是新增功能，而是穩定性與相容度達到可正式採用的門檻：官方測試相容度超過 99%（不含 cache components），並支援 App Router 與 Pages Router 兩條路線，涵蓋 React Server Components、Server Actions、API routes、route handlers、middleware 與 client-side navigation。
核心改動
1.0 版補齊了完整的頁面生命週期：伺服器渲染、預先渲染、靜態匯出、ISR（Incremental Static Regeneration）都可在 Vite 建置下運作，並在不同 router 與不同執行期之間共用同一套快取函式，避免 Pages Router 與 App Router 各自維護一套快取邏輯。專案也加入了與 Next.js 相容的 OpenTelemetry tracing，以及認證、MDX、圖片最佳化、字型、metadata 等常見生態系模式的支援。啟用方式只需要在 Vite 設定裡掛上 Vinext 外掛：
import { defineConfig } from "vite";
import vinext from "vinext";
export default defineConfig({
plugins: [vinext()],
});既有專案的遷移路徑被壓縮成兩道指令：npx vinext check 先掃描專案找出相容性問題，npx vinext init 再安裝相依套件並產生 Vite 設定檔，不會破壞既有的 Next.js 設定，可與原本的建置流程並存。新專案則用 npm create vinext-app@latest 直接起手。
官方文件 vinext.dev 公布了對照 Next.js 16（Turbopack）的建置基準測試，樣本是 33 條路由的 App Router 專案：
| 項目 | Next.js 16（Turbopack） | Vinext 1.0（Vite） |
|---|---|---|
| 正式環境建置速度 | 基準值 | 最多快 2× |
| Client bundle（gzip） | 185 KB | 143 KB（約小 23%） |
| Next.js 16 API 表面覆蓋率 | — | 94% |
另一項變動是把頁面預先渲染從建置時間搬到 Cloudflare 的網路上執行：npx @vinext/cloudflare deploy --warm-cache 會先把新版 Worker 上傳到 0% 正式流量，再對頁面發出請求以預熱快取，避免每次部署都要在建置機器上跑完整的預先渲染。專案也加入每夜對 Next.js 端對端測試套件的自動比對，以及每日對 Next.js canary 分支變更的自動審查，用來維持相容度不隨上游更新而退步。
影響範圍
直接受影響的是想把 Next.js 部署到 Vercel 以外平台的團隊：目標是 Cloudflare Workers、Netlify、AWS Lambda 的專案，過去得依賴各平台自行維護的相容層，現在多了一條官方支援、每夜跑過 Next.js 測試套件的建置路徑。在 Cloudflare Workers 上部署還需要額外疊上 Cloudflare Vite 外掛、Workers Cache CDN adapter、KV data adapter 與 Images 最佳化外掛；走 Nitro 整合的話則可用同一套設定覆蓋 Node、Vercel、Netlify、AWS 等目標。
要檢查的具體項目：用到 cache components 的專案不在 99% 測試相容度之內，遷移前務必先跑 npx vinext check 看報告而不是直接上生產環境；依賴 webpack 專屬 loader 或自訂 webpack 設定的專案，也需要在 Vite 設定裡找對應的替代外掛。想比較建置成本的團隊，可以直接拿現有專案跑一次 Vinext 建置，對照 vinext.dev 公布的 2 倍建置速度與 23% bundle 縮減是否在自己的專案規模下也成立。
原始來源：Vinext 1.0：Next.js applications, powered by Vite（Cloudflare blog）、Vinext 官方文件（vinext.dev）