frameworks-on-cloudflare

使用 Cloudflare 上的框架进行构建

将框架作为主要开发接口，并将 Cloudflare Workers 作为部署目标。使用 Workers Static Assets 提供静态网站和 SPA 输出。对于新应用，不要选择 Pages 模板、Pages 部署命令或 Pages 专用预设。进行无关维护时，应保留现有的 Pages 部署。

确定项目路径

1. 修改前先检查代码库。确认框架、已安装版本、包管理器、渲染模式、现有适配器，以及 Cloudflare 配置：cloudflare.config.ts，或 wrangler.jsonc、wrangler.json 或 wrangler.toml。
2. 保留用户选择的框架。确定任务是创建新项目、适配现有项目，还是只修改应用代码。
3. 仅阅读下方匹配的行、该框架的 Workers 指南以及框架自身的 Agent 指南。
4. 根据项目状态进行设置：
   • 新项目： 按照框架的 Workers 指南创建项目。目前，指南使用 C3 创建项目并将其配置为使用 Wrangler；这属于 cloudflare 技能默认使用 cf 创建新项目的例外，因为 cf 文档尚未涵盖框架项目的创建。创建后，项目已有 Wrangler 配置，因此接下来适用下一条。
   • 带有 Wrangler 配置的现有项目： 保留 Wrangler 并加载 wrangler 技能。按照框架指南修改适配器和配置。不要在其中运行 cf init .、cf dev、cf build 或 cf deploy。
   • 没有 Cloudflare 配置的现有项目： 使用 cf，它会检测受支持的框架并进行配置；请参阅 从现有项目开始 和 cf-cli 技能。检测成功并不代表项目可以构建。如果构建失败或框架不受支持，请按照框架指南进行手动设置。
5. 仅修改集成所需的适配器、运行时、构建和部署配置。检查生成的包脚本，运行框架的检查和构建，然后在部署前于本地验证 Worker。 | 框架 | Workers 设置 | 官方上游 Agent 指南 | | --- | --- | --- | | Next.js | 加载 nextjs-on-cloudflare skill。 | 该 skill 中列出了相关指南。 | | TanStack Start | 按照 Workers 指南 操作，该指南使用 Cloudflare Vite 插件。请区分 Start 和独立的 TanStack Router。 | 使用 TanStack Intent 查找并加载已安装的软件包 skills，包括 Start 的部署指南。 | | React Router | 确认使用的是 Framework、Data 还是 Declarative 模式。按照 Workers 指南进行全栈设置。Cloudflare Vite 插件不支持 SPA 模式，并且预渲染有版本要求；选择其中任一模式前，请先查阅指南。 | 加载官方的 React Router skill、与之匹配的模式参考，以及可用时加载已安装的软件包文档。 | | SvelteKit | 按照 Workers 指南操作，该指南使用 @sveltejs/adapter-cloudflare。 | 使用 Svelte 官方 skills和 AI 设置指南。 | | Hono | 选择仅提供 API 的 Worker，或前端加 API 的方案。Cloudflare 指南介绍了搭配 React SPA 使用 Hono；对于仅提供 API 的应用，请使用 Hono 的 Workers 指南。 | 加载 honojs/skills中的应用 skill。 | | Astro | 区分完全预渲染的输出和按需渲染：静态网站以静态资源形式部署，按需渲染则使用 @astrojs/cloudflare。按照 Workers 指南操作。 | 使用 Astro 的官方 AI 指南和文档 MCP。 | | Nuxt | 按照 Workers 指南设置当前的 Nitro 集成和绑定。 | 使用 Nuxt 文档 MCP；仅在使用 Nuxt UI 时加载 Nuxt UI skill。 | | React 或 Vue SPA | 按照 React + Vite或 Vue的 Workers 指南操作。请区分仅客户端运行的 SPA 和全栈框架。 | 使用所选框架的官方应用开发指南。 |

对于其他框架，请从框架指南索引入手。

Skill 反馈

如果用户反馈此 skill 提供的指南有误或已过时，或缺少信息，请阅读 references/skill-feedback.md。