[JS/TS] Next.js 部署到非Vercel平台太痛苦？试试 Cloudflare AI 重写的 vinext

文章转载自：Nodejs技术栈

对于众多前端开发者而言，Next.js 无疑是构建 React 应用的首选框架。然而，当你需要将其部署到 Vercel 以外的无服务器环境时，比如 Cloudflare、Netlify 或 AWS Lambda，往往会遇到不小的挑战。

过去的解决方案主要依赖于 OpenNext，这需要逆向解析 Next.js 的打包输出，不仅过程繁琐，而且维护起来相当脆弱。那么，有没有一种更直接的方法呢？

上周，Cloudflare 的一位工程师带领一个 AI 模型，尝试了一个大胆的想法：直接在 Vite 上重新实现 Next.js 的 API 接口。结果令人震惊，他们仅仅用了一周时间，就完成了这个名为 vinext 的项目。

vinext 作为 Next.js 的替代方案，完全构建在 Vite 之上，并且可以一键部署到 Cloudflare Workers。在初步的性能对比中，它的构建速度最高提升了 4.4 倍，客户端产物体积更是缩小了惊人的 57%。而完成这一切，据称只花费了大约 1100 美元的 AI API 调用费用。

性能数据：速度与体积的双重飞跃

Cloudflare 官方进行了一组基准测试，以一个包含 33 个路由的 App Router 应用为例，单纯对比打包编译阶段的性能：

生产环境构建时间对比：

框架	耗时	相比 Next.js
Next.js 16.1.6 (Turbopack)	7.38 秒	基准线
vinext (Vite 7 / Rollup)	4.64 秒	提速 1.6 倍
vinext (Vite 8 / Rolldown)	1.67 秒	提速 4.4 倍

客户端打包体积对比 (Gzip压缩后)：

框架	体积	相比 Next.js
Next.js 16.1.6	168.9 KB	基准线
vinext (Rollup)	74.0 KB	减小 56%
vinext (Rolldown)	72.9 KB	减小 57%

注：以上数据仅为本地构建阶段的性能表现，并不直接代表生产环境下的服务端响应性能。

这些数据清晰地展现了基于 Vite（尤其是未来的 Rolldown）架构的潜力。Rolldown 作为 Rust 编写的打包器，为前端构建性能带来了质的飞跃。

无缝迁移：一个没有历史包袱的平替

vinext 并非对 Next.js 的打包产物进行封装。它是利用 Vite 强大的插件系统，从零实现了 Next.js 的核心 API，包括路由、服务端渲染（SSR）、React Server Components（RSC）、Server Actions、缓存和中间件等。

对于开发者而言，迁移成本极低。由于 Vite 提供了标准化的环境接口，vinext 不仅能在 Cloudflare Workers 上运行，理论上也能适配其他支持标准 Web API 的平台。目前，你只需要替换几个 npm 脚本命令，项目文件结构完全无需改动：

npm install vinext

# 之前使用 next dev，现在直接用 vinext：
vinext dev     # 支持 HMR 的开发服务器
vinext build   # 构建生产版本
vinext deploy  # 一键部署到 Cloudflare Workers

幕后功臣：AI 如何在一周内完成重构？

若在以往，对如此复杂且流行的框架进行底层重构，可能需要一个团队耗费数月甚至数年的时间。而这次，从 2 月 13 日写下第一行代码，到初步实现路由、SSR 和流式传输，仅用了一个晚上。

不到一周，这个项目不仅通过了大量 Next.js 官方的测试用例，其 API 覆盖率更是达到了 94%。Cloudflare 团队将成功归因于四个关键因素：

1. Next.js 规范清晰：Next.js 拥有完善的文档和活跃的社区讨论，其运作机制对 AI 模型而言已是非常熟悉的知识。
2. 丰富的官方测试用例：开发过程中直接引入了 Next.js 的单元测试套件，为 AI 生成的代码提供了明确的正确性检验标准。
3. 强大的 Vite 基石：Vite 已经完美解决了热更新、模块解析和打包等核心问题，开发者无需重新发明轮子。
4. 大模型的进化：最新的大语言模型（LLM）具备更强的长上下文理解能力，能够将复杂的系统架构纳入考量，从整体上理解模块间的交互，减少了代码“幻觉”。

在整个开发流程中，工程师充当“架构师”和“指挥者”的角色，负责规划整体架构和开发顺序。AI 则负责编写具体的实现代码和测试。代码提交后，运行测试集，通过即合并，失败则将错误信息反馈给 AI 进行自我修正。

创新功能：基于流量感知的动态预渲染

原生 Next.js 的静态生成（SSG）或增量静态再生成（ISR）有一个痛点：当页面数量庞大时，构建时间会非常长。例如，一个拥有十万个商品页面的电商网站，每次构建都需要预渲染所有页面，耗时可能高达 30 分钟，但其中大部分页面可能极少被访问。

vinext 引入了一个实验性的创新功能——基于流量感知的预渲染。Cloudflare 拥有网站的流量数据，因此可以在部署时分析最近24小时的访问日志，自动识别出高流量的关键页面（例如前100个页面）并进行预渲染。对于那些访问量极低的“冷”页面，则采用按需动态渲染的策略，并在首次访问后缓存结果。

这种方式打破了传统“全量静态”或“全量动态”的二元选择，在保证核心页面体验的同时，极大地节省了构建时间和资源。

意义与展望：AI 正在重塑软件工程的抽象层

尽管 vinext 目前仍处于早期实验阶段，但它已在一个实际项目（CIO.gov）中投入生产使用。Cloudflare 认为，这个项目的意义远不止于创造了一个新的前端工具。

传统的软件开发受限于人脑的处理能力，我们需要通过框架、库和层层抽象来管理复杂性。但在 AI 时代，大模型能够将整个系统架构“装进”上下文窗口，它可能不再需要那些为人类认知而设计的、笨重的中间抽象层。只要有一个坚实的底层（如 Vite）和一套清晰的规范（如 Next.js API），AI 就能自动生成中间所有的适配代码。

前端开发的边界，或许正被 AI 以超乎想象的速度重新定义。

如何立即尝试？

vinext 提供了一个自动化迁移工具（Agent Skill），可以与 Claude Code、Cursor 等主流 AI 编程助手配合使用。

你只需要在终端运行：

npx skills add cloudflare/vinext

然后，在你的 Next.js 项目中对 AI 助手发出指令：

migrate this project to vinext

AI 将自动检查项目兼容性、安装依赖、修改配置文件并启动开发服务器。遇到需要人工决策的地方，它也会给出明确的提示。

如果你想手动尝试，可以直接使用以下命令：

npx vinext init   # 初始化并迁移现有的 Next.js 项目
npx vinext dev    # 启动开发服务器
npx vinext deploy # 部署到 Cloudflare Workers

项目的源码已在 GitHub 上开源，感兴趣的开发者可以深入探索这个由 AI 主导实现的“未来框架”雏形。

对于前沿的 Web 开发技术和 AI 工程化实践，云栈社区将持续关注并分享更多深度解读和实战经验。