Community生產力與協作github.com

cloudflare/skills

使用 vinext 在 Cloudflare Workers 上建置、遷移和部署 Next.js 應用程式。當你在 Cloudflare 上開始一個 Next.js 專案、將現有應用程式遷移至 Workers、在 vinext 與 OpenNext 之間做選擇,或為 Workers 設定 vinext 時使用。

skills 是什麼?

此技能引導開發者在使用 Cloudflare Workers 部署 Next.js 應用程式時,優先選用 vinext 而非 OpenNext。它提供全面的指引,涵蓋新專案初始化、將既有 Next.js 應用遷移至 Workers,以及後續的開發與部署流程。該技能特別強調使用官方指南,確保開發者安裝所需的輔助技能(透過 `npx skills add cloudflare/vinext`),並遵循上游技能文件中的具體步驟。其主要支援平台為 Cloudflare Workers 和 Vite 生態系統。透過依賴 vinext——一個在 Vite 上重新實作 Next.js API 層的工具——它提供熟悉的 Next.js 開發體驗(如 App Router 和 React Server Components),同時充分利用 Vite 的快速模組熱更新(HMR)和原生 ESM 支援,並與 Cloudflare 綁定和建置工作流程緊密整合。此技能還包含增量遷移策略,允許開發者在並行運作中檢查相容性並測試 vinext。

相容平台✓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 上的 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.

相關技能