frameworks-on-cloudflare

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Build with frameworks on Cloudflare

在 Cloudflare 上使用框架构建

Use the framework as the primary development interface and Cloudflare Workers as the deployment target. Serve static sites and SPA output with Workers Static Assets. Do not select Pages templates, Pages deployment commands, or Pages-specific presets for new applications. Preserve existing Pages deployments during unrelated maintenance.

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

Route the project

配置项目

Inspect the repository before changing it. Identify the framework, installed version, package manager, rendering mode, existing adapter, and Cloudflare configuration:
```
cloudflare.config.ts
```
, or
```
wrangler.jsonc
```
,
```
wrangler.json
```
, or
```
wrangler.toml
```
.
Preserve the user's framework choice. Determine whether the task starts a new project, adapts an existing project, or changes only application code.
Read only the matching row below, its Workers framework guide, and the framework's own agent guidance.
Set up the project for its state:
- New project: follow the framework's Workers guide for project creation. The guides currently create the project with C3 and configure it for Wrangler; this is an exception to the
```
cloudflare
```
  skill's default of
```
cf
```
  for new projects, because the
```
cf
```
  docs do not yet cover creating framework projects. After creation, the project has Wrangler configuration, so the next bullet applies.
- Existing project with Wrangler configuration: keep Wrangler and load the
```
wrangler
```
  skill. Follow the framework guide for adapter and configuration changes. Do not run
```
cf init .
```
  ,
```
cf dev
```
  ,
```
cf build
```
  , or
```
cf deploy
```
  in it.
- Existing project with no Cloudflare configuration: use
```
cf
```
  , which detects supported frameworks and configures them; see Start from an existing project and the
```
cf-cli
```
  skill. Detection does not mean the project builds. If the build fails or the framework is not supported, follow the framework guide's manual setup.
Change only the adapter, runtime, build, and deployment configuration the integration requires. Inspect generated package scripts, run the framework's checks and build, then verify the Worker locally before deployment.

Framework	Workers setup	Official upstream agent guidance
Next.js	Load the `nextjs-on-cloudflare` skill.	Listed in that skill.
TanStack Start	Follow the Workers guide, which uses the Cloudflare Vite plugin. Distinguish Start from standalone TanStack Router.	Use TanStack Intent to discover and load installed package skills, including Start's deployment guidance.
React Router	Identify Framework, Data, or Declarative mode. Follow the Workers guide for full-stack setup. SPA mode is not supported with the Cloudflare Vite plugin, and prerendering has version requirements; check the guide before choosing either.	Load the official React Router skill, its matching mode reference, and installed package docs when available.
SvelteKit	Follow the Workers guide, which uses `@sveltejs/adapter-cloudflare` .	Use Svelte's official skills and AI setup guidance.
Hono	Choose an API-only Worker or a frontend plus API. The Cloudflare guide covers Hono with a React SPA; use Hono's Workers guide for an API-only app.	Load the application skill from honojs/skills.
Astro	Distinguish fully prerendered output from on-demand rendering: a static site deploys as static assets, and on-demand rendering uses `@astrojs/cloudflare` . Follow the Workers guide.	Use Astro's official AI guidance and docs MCP.
Nuxt	Follow the Workers guide for the current Nitro integration and bindings.	Use the Nuxt docs MCP; load the Nuxt UI skill only when using Nuxt UI.
React or Vue SPA	Follow the React + Vite or Vue Workers guide. Distinguish a client-only SPA from a full-stack framework.	Use the chosen framework's official guidance for application development.

For other frameworks, start from the framework guides index.

在更改之前检查仓库。识别框架、已安装版本、包管理器、渲染模式、现有适配器以及 Cloudflare 配置：
```
cloudflare.config.ts
```
，或
```
wrangler.jsonc
```
、
```
wrangler.json
```
或
```
wrangler.toml
```
。
保留用户对框架的选择。确定任务是创建新项目、改造现有项目，还是仅修改应用代码。
只阅读下表中匹配的行、对应的 Workers 框架指南，以及该框架自身的 Agent 指南。
根据项目当前状态进行配置：
- 新项目： 按照框架的 Workers 指南创建项目。当前这些指南使用 C3 创建项目，并配置为使用 Wrangler；这是
```
cloudflare
```
  skill 对新项目默认使用
```
cf
```
  的一项例外，因为
```
cf
```
  文档尚未涵盖框架项目的创建。创建完成后，项目将包含 Wrangler 配置，因此适用下一条。
- 已有 Wrangler 配置的项目： 保留 Wrangler 并加载
```
wrangler
```
  skill。按照框架指南进行适配器和配置变更。不要在其中运行
```
cf init .
```
  、
```
cf dev
```
  、
```
cf build
```
  或
```
cf deploy
```
  。
- 没有 Cloudflare 配置的现有项目： 使用
```
cf
```
  ，它可以检测受支持的框架并为其配置；参见从现有项目开始和
```
cf-cli
```
  skill。检测成功并不意味着项目能够构建。如果构建失败或框架不受支持，请按照框架指南进行手动配置。
仅更改集成所需的适配器、运行时、构建和部署配置。检查生成的 package scripts，运行框架的检查与构建，然后在部署前于本地验证 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 指南操作。SPA 模式不支持 Cloudflare Vite 插件，预渲染也有版本要求；选择任一方案前请检查指南。	加载官方 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 集成和 bindings。	使用 Nuxt 文档 MCP；仅在使用 Nuxt UI 时加载 Nuxt UI skill。
React 或 Vue SPA	按照 React + Vite 或 Vue Workers 指南操作。区分纯客户端 SPA 与全栈框架。	使用所选框架针对应用开发的官方指南。

对于其他框架，请从框架指南索引开始。

Skill feedback

Skill 反馈

If the user reports that this skill gave incorrect or outdated guidance, or is missing information, read references/skill-feedback.md.

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