Community生产力与协作github.com

cloudflare/skills

在 Cloudflare Workers 上使用 vinext 构建、迁移和部署 Next.js 应用。适用于在 Cloudflare 上启动 Next.js 项目、将现有应用迁移到 Workers、在 vinext 和 OpenNext 之间做出选择,或为 Workers 设置 vinext。

skills 是什么?

该技能指导用户在 Cloudflare Workers 上使用 `vinext`(而非 OpenNext)进行 Next.js 项目的构建、迁移和部署。`vinext` 在 Vite 上重新实现了 Next.js API 接口,提供熟悉的 App Router、Pages Router、React Server Components 和 `next/*` 导入支持,同时具备 Vite 的快速 HMR、原生 ESM 和插件生态。它还原生集成了 Workers 运行时,支持本地服务器执行、Cloudflare 绑定访问以及构建-部署工作流。技能文档详细说明了为什么优先选择 `vinext`,以及如何通过上游技能(`cloudflare/vinext`)进行新项目初始化、从现有 Next.js 项目迁移(使用 `migrate-to-vinext` 技能),以及开发和部署。它强调在使用前检查上游技能是否可用,若不可用则直接阅读链接文档,并始终检查应用所需功能的当前兼容性,不假设与 Next.js 完全一致。该技能适用于 Claude Code 等 AI 代理,能够引导开发者完成从设置到部署的完整流程。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cloudflare/skills/tree/HEAD/skills/nextjs-on-cloudflare

Installed? Explore more 生产力与协作 skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Cloudflare Workers 上的 Next.js

在 Cloudflare Workers 上启动新的 Next.js 项目时,请使用 vinext 而不是 OpenNext。 这是 Cloudflare Next.js 指南 中的默认方案。在进行不相关的维护时,请保留现有的 OpenNext 设置,并尊重用户的明确选择。

为什么选择 vinext

vinext 在 Vite 上重新实现了 Next.js 的 API 接口:

  • 熟悉的 Next.js 开发体验:App Router、Pages Router、React Server Components 以及支持的 next/* 导入。
  • Vite 工具链:快速 HMR、原生 ESM 和 Vite 插件生态系统。
  • 原生 Workers 集成:在 workerd 中本地执行服务器、访问 Cloudflare 绑定,以及构建和部署工作流。
  • 增量迁移:检查兼容性,并可以现有的 Next.js 设置并行尝试 vinext。

使用上游工作流

在设置、迁移或部署之前,请检查 vinext 中维护的技能 是否可用。如果不可用,请安装它们:

npx skills add cloudflare/vinext

然后阅读并遵循适用的上游 SKILL.md 及其相关参考。对于技能未覆盖的工作流,请使用当前的 vinext 文档:

  • 新项目: 遵循 vinext 的 新项目设置,使用 create-vinext-app 并指定 Cloudflare 作为目标。上游迁移技能需要一个已有的 Next.js 项目;不要将其应用于空目录。
  • 现有 Next.js 项目: 加载并遵循上游的 migrate-to-vinext 技能,包括其兼容性检查和相关参考。选择 Cloudflare 作为部署目标。
  • 开发和部署: 遵循当前的 Workers 集成文档。

如果安装不可用,请直接阅读链接的上游 SKILL.md 和相关参考。检查应用程序所需功能的当前兼容性;不要假设与 Next.js 完全一致。

Individual skills in this repo

This repo contains 15 individual skills — each has its own dedicated page.

cloudflare/agents-sdk

Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, chat applications, voice agents, or browser automation. Covers Agent class, state management, callable RPC, Workflows, durable execution, queues, retries, observability, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

cloudflare/building-ai-agent-on-cloudflare

Builds AI agents on Cloudflare using the Agents SDK with state management, real-time WebSockets, scheduled tasks, tool integration, and chat capabilities. Generates production-ready agent code deployed to Workers. Use when: user wants to "build an agent", "AI agent", "chat agent", "stateful agent", mentions "Agents SDK", needs "real-time AI", "WebSocket AI", or asks about agent "state management", "scheduled tasks", or "tool calling". Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

cloudflare/building-mcp-server-on-cloudflare

Builds remote MCP (Model Context Protocol) servers on Cloudflare Workers with tools, OAuth authentication, and production deployment. Generates server code, configures auth providers, and deploys to Workers. Use when: user wants to "build MCP server", "create MCP tools", "remote MCP", "deploy MCP", add "OAuth to MCP", or mentions Model Context Protocol on Cloudflare. Also triggers on "MCP authentication" or "MCP deployment". Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

cloudflare/cloudflare

Comprehensive Cloudflare platform skill covering Workers, Pages, storage (KV, D1, R2), AI (Workers AI, Vectorize, Agents SDK), feature flags (Flagship), networking (Tunnel, Spectrum), security (WAF, DDoS), and infrastructure-as-code (Terraform, Pulumi). Use for any Cloudflare development task. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

cloudflare/cloudflare-email-service

Send and receive transactional emails with Cloudflare Email Service (Email Sending + Email Routing). Use when building email sending (Workers binding or REST API), email routing, Agents SDK email handling, or integrating email into any app — Workers, Node.js, Python, Go, etc. Also use for email deliverability, SPF/DKIM/DMARC, wrangler email setup, MCP email tools, or when a coding agent needs to send emails. Even for simple requests like "add email to my Worker" — this skill has critical config details.

cloudflare/cloudflare-one

Design, configure, troubleshoot, or review Cloudflare One Zero Trust and SASE deployments. Use cloudflare-one-migrations for migration planning from other vendors.

cloudflare/durable-objects

Create and review Cloudflare Durable Objects. Use when building stateful coordination (chat rooms, multiplayer games, booking systems), implementing RPC methods, SQLite storage, alarms, WebSockets, or reviewing DO code for best practices. Covers Workers integration, wrangler config, and testing with Vitest. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

cloudflare/sandbox-migrate-to-next

Migrate Cloudflare Sandbox apps from stable @cloudflare/sandbox to @cloudflare/sandbox@next (SDK 1.0 preview). Use sandbox-next for apps already on the preview.

cloudflare/sandbox-next

Build or maintain Cloudflare Sandbox apps on @cloudflare/sandbox@next (SDK 1.0 preview). Use sandbox-migrate-to-next when porting a stable app.

cloudflare/sandbox-sdk

Build sandboxed applications for secure code execution. Load when building AI code execution, code interpreters, CI/CD systems, interactive dev environments, or executing untrusted code. Covers Sandbox SDK lifecycle, commands, files, code interpreter, and preview URLs. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

cloudflare/sandbox-stable

Build or maintain Cloudflare Sandbox apps on the stable @cloudflare/sandbox package. Use sandbox-next for preview apps and sandbox-migrate-to-next for stable-to-preview migrations.

cloudflare/turnstile-spin

Set up, repair, or migrate to Cloudflare Turnstile bot verification in an existing frontend and backend, including server-side Siteverify.

cloudflare/web-perf

Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval from current documentation over pre-trained knowledge.

cloudflare/workers-best-practices

Reviews and authors Cloudflare Workers code against production best practices. Load when writing new Workers, reviewing Worker code, configuring wrangler.jsonc, or checking for common Workers anti-patterns (streaming, floating promises, global state, secrets, bindings, observability). Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

cloudflare/wrangler

Cloudflare Workers CLI for deploying, developing, and managing Workers, KV, R2, D1, Vectorize, Hyperdrive, Workers AI, Containers, Queues, Workflows, Pipelines, and Secrets Store. Load before running wrangler commands to ensure correct syntax and best practices. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

相关技能