CommunityProductivité et collaborationgithub.com

Next.js sur Cloudflare

Construisez, migrez et déployez des applications Next.js sur Cloudflare Workers avec vinext. À utiliser lors du démarrage d'un projet Next.js sur Cloudflare, du transfert d'une application existante vers Workers, du choix entre vinext et OpenNext, ou de la configuration de vinext pour Workers.

Qu'est-ce que Next.js sur Cloudflare ?

Ce skill est conçu pour les développeurs utilisant des agents d'IA (tels que Claude Code, Cursor, Codex) afin de les guider dans la création, la migration et le déploiement d'applications Next.js sur Cloudflare Workers en utilisant vinext. Contrairement à OpenNext, vinext est recommandé comme solution par défaut pour les nouveaux projets. Il réimplémente l'API Next.js sur Vite, offrant ainsi un environnement de développement familier avec le routage App Router et Pages Router, les composants serveur React, ainsi qu'une intégration native avec Workers pour l'accès aux bindings Cloudflare. Le skill fournit des instructions claires pour installer les compétences en amont via `npx skills add cloudflare/vinext`, puis suivre les guides appropriés pour la création d'un nouveau projet, la migration d'une application existante, ou le développement et le déploiement. Il insiste sur le respect des choix explicites de l'utilisateur et la préservation des configurations OpenNext lors de maintenances non liées.

Compatible avec✓Claude Code~Codex CLI~Cursor
Part ofAgent Workflows
npx skills add https://github.com/cloudflare/skills/tree/HEAD/skills/nextjs-on-cloudflare

Installed? Explore more Productivité et collaboration skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait Next.js sur Cloudflare ?

Utilisez vinext plutôt qu'OpenNext pour les nouveaux projets Next.js sur Cloudflare Workers. C'est le choix par défaut dans le guide Cloudflare Next.js. Préservez les configurations OpenNext existantes lors de maintenances non liées et respectez les choix explicites de l'utilisateur.

Pourquoi vinext

vinext réimplémente la surface API de Next.js sur Vite :

  • Développement Next.js familier : App Router, Pages Router, React Server Components et les imports next/* pris en charge.
  • Outillage Vite : HMR rapide, ESM natif et l'écosystème de plugins Vite.
  • Intégration native Workers : exécution locale du serveur dans workerd, accès aux bindings Cloudflare et un flux de construction et déploiement.
  • Migration incrémentale : vérifiez la compatibilité et essayez vinext aux côtés d'une configuration Next.js existante.

Utilisez le flux de travail en amont

Avant la configuration, la migration ou le déploiement, vérifiez si les skills maintenus dans vinext sont disponibles. S'ils sont absents, installez-les :

npx skills add cloudflare/vinext

Ensuite, lisez et suivez le SKILL.md amont applicable ainsi que ses références pertinentes. Utilisez la documentation actuelle de vinext pour les flux de travail que les skills ne couvrent pas :

  • Nouveau projet : suivez la configuration nouveau projet de vinext en utilisant create-vinext-app avec la cible Cloudflare. Le skill de migration amont nécessite un projet Next.js existant ; ne l'appliquez pas à un répertoire vide.
  • Projet Next.js existant : chargez et suivez le skill amont migrate-to-vinext, y compris sa vérification de compatibilité et ses références pertinentes. Sélectionnez Cloudflare comme cible de déploiement.
  • Développement et déploiement : suivez la documentation actuelle sur l'intégration Workers.

Si l'installation n'est pas disponible, lisez directement le SKILL.md amont lié et les références pertinentes. Vérifiez la compatibilité actuelle pour les fonctionnalités requises de l'application ; ne supposez pas une parité complète avec 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.

Skills associés

steipete/gemini

Gemini CLI one-shot prompts, summaries, generation, skills, hooks, MCP, or Gemma routing.

community

steipete/gh-issues

Fetch GitHub issues, select candidates, spawn background fix agents, open PRs, and optionally process PR review comments.

community

steipete/skill-creator

Create, edit, audit, tidy, validate, or restructure AgentSkills and SKILL.md files.

community

steipete/clawhub

Search, install, update, sync, or publish agent skills with the ClawHub CLI and registry.

community

steipete/coding-agent

Delegate coding work to Codex, Claude Code, or OpenCode as background workers; not simple edits or read-only code lookup.

community

steipete/mcporter

List, configure, authenticate, call, and inspect MCP servers/tools with mcporter over HTTP or stdio.

community
← More Productivité et collaboration skills