Cloudflare 发布 Vinext 1.0，用 Vite 重写 Next.js 运行时

Vite 重做 Next.js！

大家好，我是 xy。

Cloudflare 最近正式发布了 Vinext 1.0。

这个项目最有意思的一个点是：

它用 Vite，重新实现了一套高度兼容 Next.js 的运行时。

不是简单给 Next.js 换个构建工具，而是把路由、SSR、RSC、Server Actions、Middleware、缓存这些能力，都重新搬到了 Vite 这套体系里。

更关键的是，Vinext 现在已经不只是实验项目了。Cloudflare 已经把它定位成 production-ready，核心高频功能测试兼容度超过 **99%**。

什么是 Vinext？

Vinext 可以理解成：

Next.js 的开发方式 + Vite 的底层工具链。

Illustration for the section “什么是 Vinext？”

官方 Next.js 现在大致是：

React
  ↓
Next.js
  ↓
Turbopack

而 Vinext 是：

React
  ↓
Next.js API
  ↓
Vinext
  ↓
Vite

所以它并不是单纯把 Turbopack 换成 Vite。

Next.js 里面那些和框架强相关的能力，比如 App Router、Pages Router、RSC、Server Actions、Middleware、ISR、Revalidation，Vinext 都自己重新实现了一遍。

也就是说，你还是按熟悉的 Next.js 方式开发，但底层已经换成了 Vite。

Vinext 有哪些优势？

目前 Vinext 已经覆盖了大部分常用的 Next.js 能力

Our test compatibility has risen to more than 99%, excluding cache components

包括：

App Router
Pages Router
Hybrid
React Server Components
Server Actions
API Routes
Route Handlers
Middleware
SSR
ISR
Static Prerendering
Static Export
Metadata
图片、字体、环境变量
OpenTelemetry
Sentry

官方给出的核心高频功能测试兼容度已经超过 99%。

当然，这里并不是说整个 Next.js 已经做到 100% 兼容。像 Cache Components，目前还没有完全覆盖。

另一个优势就是 部署更灵活。

Vinext 并没有绑死 Cloudflare，目前官方已经提到可以部署到：

Cloudflare Workers
Netlify
AWS Lambda

对于不想把 Next.js 项目和某个平台绑得太死的开发者来说，这个点还是挺有吸引力的。

另外，Vinext 1.0 还加入了 Cache Warming。

它可以先部署新版本，但暂时不给正式流量，然后提前请求页面、生成缓存，等缓存准备好之后再正式切流量。

对于页面量特别大的站点，这种方式比在 Build 阶段一次性生成所有页面灵活不少。

如何快速使用？

新项目可以直接创建：

npm create vinext-app@latest my-app

进入项目：

cd my-app
npm install
npm run dev

整体使用方式和普通 React / Next.js 项目差别不大，核心还是熟悉的路由、Server Components 和 Server Actions。

如果你本身就写过 Next.js，上手成本基本不高。

老项目怎么迁？

Vinext 这次比较实用的一点，就是现有 Next.js 项目不需要重新写。

原来的 app/、pages/、路由结构、Server Components、Server Actions，大部分都可以继续保留。

迁移前先执行：

npx vinext check

它会先检查当前项目有没有明显的兼容问题。

确认没什么大问题之后，再执行：

npx vinext init

Vinext 会帮你初始化相关的 Vite 和运行配置。

所以它的迁移思路其实很直接：

业务代码尽量不动，主要替换底层运行方式。

如果是普通 Next.js 项目，我觉得现在已经很适合拿一个非核心项目先试试。

如果是特别复杂的大型项目，依赖了大量 Next.js 特殊插件、缓存方案或者最新特性，那还是建议先跑 vinext check，别直接全量切。

写在最后

Vinext 1.0 真正值得关注的地方，不是“又来了一个 React 框架”。

而是：Next.js 这套开发方式，现在真的可以跑在 Vite 上了。

以前大家提到 React 全栈，基本就是：

Next.js + Turbopack

现在多了一条路：

Next.js API + Vinext + Vite

而且已经不是只能看 Demo 的阶段。

常用能力基本覆盖，老项目可以迁，官方也已经给出了 production-ready 的定位。

如果你本身就在用 Next.js，这个项目确实值得关注一下。