vinext Vibe 项目

项目简介

vinext 是 Cloudflare 官方开源项目（cloudflare/vinext），作为 Vite 插件在 Vite 之上重新实现 Next.js 的 API 表面，使 Next.js 应用可以运行在 Cloudflare Workers 上，并兼容 Node.js 与其他平台。项目以"AI 一周重建 Next.js"为亮点（详见 Cloudflare 博客），保留 App Router、Pages Router、RSC、Server Actions、middleware、route handlers、ISR 等核心能力，同时通过 vinext init 与 Agent Skill 提供迁移工具链，让现有 Next.js 项目低成本迁移。

核心功能

• App Router + Pages Router：在 dev 与 prod 构建中完整支持两种路由模式，可同时使用 app/ 与 pages/ 目录。
• RSC + Server Actions + Middleware：React Server Components、Server Actions、middleware 与 route handlers 均按 Next.js 语义实现。
• 静态生成与 ISR：output: "export" 静态导出、独立 Node.js 部署、ISR 缓存策略均保留。
• 核心 Next.js 模块：next/link、next/image、next/navigation、next/headers、next/cache、Metadata API 等常用模块在 vinext 中可用。
• Cloudflare Workers 深度集成：原生支持 bindings、cache adapters、request-time image optimization，可直接部署到 Workers。
• 迁移工具链：vinext check（兼容性预检）、vinext init（一键迁移）、Agent Skill（让 AI 帮你迁移）。
• 多平台输出：Cloudflare Workers 为首选目标，Node.js / 其他平台以不同程度支持。

技术实现

vinext 不是消费 next build 输出，而是从源码层用 Vite 插件重新实现 Next.js API 表面：把 App Router / Pages Router 解析为 Vite 的构建图，RSC 与 Server Actions 通过 react-server-dom-webpack + @vitejs/plugin-rsc 集成，middleware 与 route handlers 走 Vite 的请求钩子体系；缓存层（cache adapters、ISR）针对 Cloudflare Workers 做了 KV / Durable Objects 适配，request-time 图像优化走 Workers 自带的 image binding 而非构建时流水线。Node.js 与其他平台通过 @cloudflare/vite-plugins 抽象层提供不同程度的兼容。vinext init 把现有 Next.js 项目改造为 vinext 项目（更新依赖、写 vite.config.ts、迁移 next/* 引用），vinext check 静态扫描兼容性缺口；Agent Skill 则把这两步打包成 Claude Code / OpenCode / Cursor / Codex 可理解的指令序列，让 AI 直接驱动迁移。

快速上手

• 第 1 步：准备 Node.js 18+ 与 pnpm（或 npm）；Cloudflare 账号（部署到 Workers 需要 wrangler 登录）。
• 第 2 步：新建项目：pnpm create vinext-app@latest my-app，生成的脚手架已配好 Vite、vinext、React、TypeScript 与 Cloudflare 部署配置。
• 第 3 步：迁移现有项目：在 Next.js 项目根目录跑 npx vinext init，自动改写依赖、添加 vite.config.ts、把 next/* 引用替换为等价实现。
• 第 4 步：可选地安装 Agent Skill：npx skills add cloudflare/vinext，然后在 Claude Code / Cursor / Codex 等工具里说"migrate this project to vinext"，AI 会自动跑兼容性检查、依赖安装、配置生成、dev server 启动。
• 第 5 步：本地 pnpm dev 启动开发服务器；准备部署时 pnpm build && wrangler deploy 上 Cloudflare Workers，bindings 与缓存配置通过 wrangler.toml 注入。
• 第 6 步：迁移完成前先跑 vinext check 列出兼容性缺口，常见缺口包括 Cache Components 完整行为、部分 native 模块（如 sharp、resvg）在 RSC dev 环境的兼容性。

适用人群

• 想把现有 Next.js 项目部署到 Cloudflare Workers 的全栈工程师；
• 偏好 Vite 生态、希望用更轻构建工具的前端工程师；
• 在 Cloudflare 全家桶（Pages / Workers / KV / Durable Objects）上构建应用，需要 React 服务端渲染的团队；
• 用 Claude Code / Cursor / Codex 等 AI 编程工具、希望 AI 帮忙迁移的开发者；
• 关注边缘计算成本、希望 ISR + RSC 在边缘节点运行的独立开发者与创业团队。