技能包

用 vinext 在 Vite 上跑面向 Workers 的 Next.js

用官方 create 在 Vite 上跑 Next.js 并面向 Cloudflare Workers,但还不能当作所有生产应用的即插即用替代。

官方来源 · cloudflare/vinext

安装

pnpm create vinext-app@latest my-app

适合谁

这份技能适合已经在写 Next.js、又想改走 Vite、并把 Cloudflare Workers 当作主要部署目标的人。官方把它写成:在 Vite 上运行 Next.js 应用,首要落地环境是 Cloudflare Workers。它也适合准备在本机新建示例目录、并能接受官方创建命令会写入磁盘的人。

原文还写明它能配合 Claude Code、OpenCode、Cursor、Codex 以及许多其他 AI 编程工具。这是一份示例名单,不能理解成只支持这四款。若你只做静态页、或部署目标根本不是 Workers,先停在阅读说明。

它还不适合把现网生产应用当成「换一下就能跑」的对象。官方明确:今天能支撑不少有分量的 Next.js 应用,但还不是每一个应用或生产负载的即插即用替代。官方仓库见 https://github.com/cloudflare/vinext 请按该页已写出的命令操作。

3 分钟完成第一次尝试

只走官方写出的新建项目路径。

前置条件:本机可以运行 pnpm,当前目录允许新建文件夹,并且你明确同意一次本地初始化。先确认:下面的命令会创建名为 my-app 的新目录。若你还不想写磁盘,不要执行。

安装位置:在你准备放新项目的目录打开终端,确认上述副作用后执行:

pnpm create vinext-app@latest my-app

低风险核对:目录出现后,先只读查看项目说明和配置,不要部署,也不要改现网仓库。若你打开的是已有 Next.js 项目,原文给出的下一句是在受支持的工具里说 migrate this project to vinext;第一次尝试请先停在「只复述这句话会改什么」,不要让工具直接改文件。

成功信号:当前目录出现 my-app,并且能看出这是按 vinext 建出的 Next.js-on-Vite 项目。若命令失败,不要自行补未出现的安装器,回到官方页面核对原文。

使用案例

案例一:从零建一个面向 Cloudflare Workers 的 Vite 版 Next.js 项目。官方命令是 pnpm create vinext-app@latest my-app。适合想先有一份可检查的本地目录、再决定是否继续开发的人。动手前确认没有同名文件夹;原文没有写出如何跳过安装或改部署目标时,不要假设存在这类开关。

案例二:评估已有 Next.js 项目要不要迁到 vinext。原文写明:在任一受支持的工具里打开该项目,并说 migrate this project to vinext。第一次请先让工具列出它准备改哪些文件,确认后再允许写入。原文没有给出迁移覆盖的路由、数据获取或中间件清单,因此只能做到「按官方口令启动评估」,不要把未写出的兼容表补全。

使用边界

官方主路径是 pnpm create vinext-app@latest my-app。不要把未出现的安装器写进主路径。部署侧原文只把 Cloudflare Workers 写成首要目标,没有证明可以原样推到未点名的平台。

能力边界写得很清楚:今天能支撑不少有分量的 Next.js 应用,但还不是每一个应用或生产负载的即插即用替代。不要用它去承诺现网零改动切换。

工具名单是 Claude Code、OpenCode、Cursor、Codex 以及许多其他 AI 编程工具,属于示例而非封闭名单。迁移口令只有一句被原文写出;密钥、环境变量和生产发布步骤原文没有展开,不要补。官方页面是 https://github.com/cloudflare/vinext 若工具建议的命令与该页不一致,以该页为准。