cloudflare/skills

Erstellen, migrieren und bereitstellen von Next.js-Apps auf Cloudflare Workers mit vinext. Verwenden Sie dies beim Starten eines Next.js-Projekts auf Cloudflare, beim Umzug einer bestehenden App zu Workers, bei der Wahl zwischen vinext und OpenNext oder beim Einrichten von vinext für Workers. Für Einrichtung, Migration oder Bereitstellung installieren Sie die Upstream-Skills von vinext mit `npx skills add cloudflare/vinext`, falls nicht vorhanden, und lesen und befolgen Sie dann den entsprechenden Skill und die Dokumentation.

Was ist skills?

Dieser Skill leitet Entwickler an, Next.js-Anwendungen auf Cloudflare Workers mit vinext zu erstellen, zu migrieren und bereitzustellen, wobei vinext gegenüber OpenNext als bevorzugte Lösung empfohlen wird. Er ist nützlich für Entwickler, die mit Next.js auf der Edge-Plattform von Cloudflare arbeiten, und unterstützt Tools wie Claude Code, Cursor und Codex. Der Skill beschreibt, warum vinext, das die Next.js-API auf Vite neu implementiert, eine bessere Wahl für neue Projekte ist – mit vertrauter Next.js-Entwicklung (App Router, Pages Router, React Server Components), schnellem HMR, nativer ESM-Unterstützung, Vite-Plugin-Ökologie und nativer Workers-Integration. Er erklärt auch, wie man den Upstream-Workflow von vinext nutzt: Installieren der erforderlichen Skills mit `npx skills add cloudflare/vinext`, dann Befolgen der entsprechenden SKILL.md-Dateien für neue Projekte, Migration von bestehenden Next.js-Projekten und Bereitstellungs-Workflows. Der Skill stellt sicher, dass Entwickler die richtigen Schritte befolgen, Kompatibilitätsprüfungen durchführen und die aktuellen vinext-Dokumentationen für nicht abgedeckte Workflows verwenden.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cloudflare/skills/tree/HEAD/skills/nextjs-on-cloudflare

Installed? Explore more Produktivität & Zusammenarbeit skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Next.js auf Cloudflare

Verwenden Sie vinext anstelle von OpenNext für neue Next.js-Projekte auf Cloudflare Workers. Dies ist die Standardeinstellung im Cloudflare Next.js-Leitfaden. Behalten Sie bestehende OpenNext-Setups während nicht zusammenhängender Wartungsarbeiten bei und respektieren Sie explizite Benutzerentscheidungen.

Warum vinext

vinext implementiert die Next.js-API-Oberfläche auf Vite neu:

  • Vertraute Next.js-Entwicklung: App Router, Pages Router, React Server Components und unterstützte next/*-Importe.
  • Vite-Tooling: schnelles HMR, natives ESM und das Vite-Plugin-Ökosystem.
  • Native Workers-Integration: lokale Serverausführung in workerd, Zugriff auf Cloudflare-Bindungen und ein Build-and-Deploy-Workflow.
  • Inkrementelle Migration: Prüfen Sie die Kompatibilität und testen Sie vinext parallel zu einem bestehenden Next.js-Setup.

Verwenden Sie den Upstream-Workflow

Überprüfen Sie vor der Einrichtung, Migration oder Bereitstellung, ob die in vinext gepflegten Skills verfügbar sind. Falls nicht vorhanden, installieren Sie sie:

npx skills add cloudflare/vinext

Lesen und befolgen Sie dann die entsprechende upstream SKILL.md und ihre relevanten Referenzen. Verwenden Sie die aktuellen vinext-Dokumentationen für Workflows, die von den Skills nicht abgedeckt werden:

  • Neues Projekt: Befolgen Sie die Einrichtung eines neuen Projekts von vinext mit create-vinext-app und dem Cloudflare-Ziel. Der upstream-Migrationsskill erfordert ein bestehendes Next.js-Projekt; wenden Sie ihn nicht auf ein leeres Verzeichnis an.
  • Bestehendes Next.js-Projekt: Laden Sie den upstream migrate-to-vinext Skill und befolgen Sie ihn, einschließlich seiner Kompatibilitätsprüfung und relevanten Referenzen. Wählen Sie Cloudflare als Bereitstellungsziel.
  • Entwicklung und Bereitstellung: Befolgen Sie die aktuellen Workers-Integrationsdokumentationen.

Falls die Installation nicht verfügbar ist, lesen Sie die verlinkte upstream SKILL.md und die relevanten Referenzen direkt. Überprüfen Sie die aktuelle Kompatibilität für die erforderlichen Funktionen der Anwendung; gehen Sie nicht von vollständiger Next.js-Gleichheit aus.

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.

Verwandte Skills