问题描述：

前言

前段时间, Cloudflare的工程师借助Claude和OpenCode花了$1,100 开发出了Vinext. 在此之前Next.js都是与Vercel之家的Turbopack高度绑定的, 有了Vinext之后就可以用Vite来构建Next.js应用了. Cloudflare关于vinext的相关博文: How we rebuilt Next.js with AI in one week

前排提醒: 目前vinext仍处于早期阶段, 不推荐生产环境使用并且本文中的一些内容在你看到时可能已经过时.

创建项目

目前vinext没有提供初始化项目的脚手架, 但是提供了从Next.js项目迁移到vinext的agent skill, 所以目前建议是使用next-app来创建一个标准的Next.js项目, 然后在vibe coding 工具里使用skill迁移.

pnpm create next-app@latest my-app --yes npx skills add cloudflare/vinext

然后在Claude code/codex 中告诉ai:

migrate this project to vinext

与Cloudflare 集成

通过上一步AI做的迁移后, 已经可以通过vinext dev 或者 vinext start 脚本将服务跑在标准Node.js环境中了, 但是如果要部署到Cloudflare worker并且使用Cloudflare KV, D1等平台集成的功能的话还需要做点额外的配置

1. 安装cloudflare/vite-plugin 和 wrangler 依赖

pnpm add -D vite @cloudflare/vite-plugin wrangler

2. 编辑 vite.config.ts

import { defineConfig } from "vite"; import vinext from "vinext"; import { cloudflare } from "@cloudflare/vite-plugin"; export default defineConfig({ plugins: [ vinext(), // 加入这个 cloudflare({ viteEnvironment: { name: "rsc", childEnvironments: ["ssr"] }, }), ], });

3. 编辑wrangler.jsonc

修改main字段定义worker的入口:

"main": "vinext/server/app-router-entry",

定义要用到的binding(以d1数据库为例子):

"d1_databases": [ { "binding": "DB", "database_id": "<your_d1_id>", } ],

4. 在代码里使用KV, D1等binding

参考: Plan for bindings · Issue #195 · cloudflare/vinext · GitHub

import { env } from "cloudflare:workers"; export default async function Page() { const result = await env.DB.prepare("SELECT * FROM posts").all(); return <div>{JSON.stringify(result)}</div>; }

5. 特殊情况,比如使用cron trigger, 需要自定义worker入口

vinext的博客和项目主页目前都没有写如何使用worker的cron trigger, 于是翻了下兄弟项目opennext的文档, 在里面找到了需要自定义worker入口:

i. 在项目内的任意位置定义一个worker.ts

// worker/worker.ts import { runCron } from "@/lib/cron"; import handler from "vinext/server/app-router-entry"; export default { fetch: handler.fetch, // 定时任务 async scheduled() { await runCron(); }, };

ii. 修改wrangler.jsonc里的main字段为入口文件路径:

"main": "worker/worker.ts",

可以在Cloudflare面板里查看cron事件的运行情况:
cron_run1251×454 28.5 KB

vinext目前官方没有很详细的文档, 更多的使用案例可以参考官方仓库的examples: vinext/examples at main · cloudflare/vinext · GitHub

重复造个轮子试试效果

之前学了学了Next.js还没用过, 正好用Next.js 16 + vinext, 和我的好伙伴claude code一起实现一个像 GitHub - wangwangit/SubsTracker: 基于Cloudflare Workers的轻量级订阅管理系统，帮助您轻松跟踪各类订阅服务的到期时间，并通过Telegram发送及时提醒。 · GitHub 一样跑在worker上的订阅管理系统Subflare, 选这个来实现是因为看起来比较简单适合练手, 最后跑起来似乎运行得很好. 代码开源: GitHub - Merack/subflare-vinext: Subflare 是一个运行在 Cloudflare Workers 上的订阅到期提醒管理应用，基于 Next.js 16, vinext, shadcn-ui和 Drizzle ORM 构建 · GitHub
一键部署到Cloudflare worker:

一些效果图

dashboard1845×925 49 KB
subscription1846×926 74.5 KB
settings1375×931 38.7 KB

后记

Cloudflare的博客里介绍说vinext基本上是vibe coding出来的, 工程师甚至没有完整review过里面的代码但是用ai生成了很多测试来确保功能正常.
我实际使用起来感觉vinext对于Next.js 16的支持甚至比老牌的Next.js适配项目opennext更好, 比如在Next.js 16中官方已将middleware.ts重命名为了proxy.ts, 在vinext中用新的写法运行正常但在opennext中却不支持,要换回middleware.ts才能通过(至少现在是这样); 除此之外opennext获取worker环境binding的函数getCloudflareContext()在某些情况下也有问题,个人使用下来感觉vinext好像更好一点.

网友解答：

---

--【壹】--：

趁着清明假期添加了几个通知渠道, 目前支持以下通知渠道:

• Telegram
• webhook
• wecombot(企业微信机器人)
• bark
• notifyx
• resend
• smtp
  image295×353 6.95 KB