深入 Cloudflare Vinext：从头开始的 Next.js App Router 重建

Source: Dev.to

概览

Cloudflare 推出了 Vinext，这是一套完全基于 Vite 重新实现的 Next.js App Router。
它不是 Next.js 的包装器或适配器；而是对 App Router 表层（包括基于文件的路由、React Server Components（RSC）流式传输以及服务器动作）进行的全新从零构建，底层使用 Vite 而非原始的 Next.js 工具链。

声称的优势

• 构建速度提升 4.4 倍
• 客户端包体积缩小 57 %
• 覆盖 Next.js 16 App Router API 的 94 %

迁移路径

迁移过程刻意保持最小化。你不再运行 next，而是运行 vinext。现有的项目结构保持不变：

• app/ 目录
• next.config.js
• 现有的组件和路由模式

无需重新组织结构。

npm install vinext

vinext dev      # 启动带 HMR 的开发服务器
vinext build    # 创建生产构建
vinext deploy   # 构建并部署到 Cloudflare Workers

开发背景

据称该项目由一名工程师在约一周时间内完成，期间协调了超过 800 次 AI 辅助编码会话，估计代币费用约为 $1,100。

背景：Next.js 与 Cloudflare

Next.js 目前是使用最广泛的 React 框架。随着时间推移，它越来越针对特定的托管环境（Vercel）进行优化。这种耦合逐步加深，影响了诸如增量静态再生（ISR）等特性。

Vinext 采用了不同的思路：它保留了面向开发者的 API，同时面向另一种运行时——Cloudflare Workers。

当前限制

• 构建时不进行静态预渲染 —— 与 Next.js 的 generateStaticParams() 不同，Vinext 目前在 vinext build 时不会预生成静态 HTML。
• 静态预渲染已列入路线图，但在此之前，纯静态站点可能无法充分受益。

流量感知预渲染（TPR）

为缓解缺少静态预渲染的问题，Cloudflare 引入了 Traffic‑aware Pre‑Rendering（TPR）：

1. 部署时，Vinext 分析最近的流量数据。
2. 仅对流量显著的页面进行预渲染。
3. 其余页面回退为按需 SSR，并使用 ISR 缓存。

TPR 旨在降低大型站点在没有完整静态预渲染情况下的构建时间，但仍属实验性功能，非默认行为。

含义

• Next.js App Router 的体验——即开发者依赖的 API——不再严格绑定于原始的 Next.js 实现。
• 基于 Vite 的工具链能够以更小的包体积和显著更快的构建速度实现相同的 API 表层，至少在早期测试中如此。
• Cloudflare 的部署集成（Workers、KV、Agents 等）为平台特定特性提供了一流支持，无需额外的变通方案。
• 在构建 Vinext 时大量使用 AI 辅助，表明在合适的模型、测试和工具配合下，大型代码库可以高效组装，同时仍需人工进行架构把控。

Vinext 不仅是一次性能实验；它声明了框架 API 可以脱离原始运行时。它挑战了构建工具、部署平台与开发者体验之间的耦合假设。