Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

nextjs-on-cloudflare — Claude Code skill: Next.js on Cloudflare

Skill for deploying Next.js apps to Cloudflare Workers via vinext. Use for new projects, migrating existing apps, or choosing between vinext and OpenNext.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add cloudflare/skills --skill nextjs-on-cloudflare -a claude-code
Open on GitHub

What nextjs-on-cloudflare does

The nextjs-on-cloudflare skill points you to vinext, a Vite-based reimplementation of the Next.js API. You get familiar development—App Router, Pages Router, React Server Components—paired with fast HMR, native Workers integration, and direct access to Cloudflare bindings in your local workerd environment.

This skill works alongside upstream skills from the vinext repository. Before setup, migration, or deployment, run npx skills add cloudflare/vinext to pull current instructions. If skills are unavailable, read the docs directly: new projects use create-vinext-app, existing Next.js apps migrate via migrate-to-vinext, and deployment is handled through the Workers integration docs.

One caveat: don't assume full Next.js parity. Check feature compatibility for your app before migrating.

What it helps with

  • launch a new Next.js project on Cloudflare Workers
  • migrate an existing Next.js app from Next.js to vinext
  • decide between vinext and OpenNext for Workers
  • set up local development with Cloudflare bindings

Example prompts for the agent

  • Install nextjs-on-cloudflare for Claude Code and help me scaffold a new vinext project
  • I need to move my Next.js app to Cloudflare Workers—use migrate-to-vinext
  • Check whether my Next.js project's features will work with vinext

How to install nextjs-on-cloudflare

1Skills CLI (Vercel)

npx skills add cloudflare/skills --skill nextjs-on-cloudflare -a claude-code

2Manually: put the files in place

~/.claude/skills/nextjs-on-cloudflare/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/nextjs-on-cloudflare/

From the same set18

The whole set →
cloudflare cloudflare Helps coding agents pick the right Cloudflare products for applications, storage, and AI, while routing between cf CLI and Wrangler. Claude Code CX Codex Cursor +1 136,500installs wrangler cloudflare Runs and troubleshoots Wrangler CLI commands for Cloudflare Workers projects that use wrangler configuration files. Claude Code CX Codex Cursor +1 128,500installs workers-best-practices cloudflare Guides coding agents on production Cloudflare Workers standards, Wrangler typing, observability setup, and runtime anti-pattern checks. Claude Code CX Codex Cursor +1 124,900installs durable-objects cloudflare This skill helps build, debug, and review Cloudflare Durable Objects for state, coordination, and persistent connections. Claude Code CX Codex Cursor +1 109,700installs web-perf cloudflare Audit Core Web Vitals, diagnose rendering bottlenecks, and inspect network dependencies directly through your agent. Claude Code CX Codex Cursor +1 109,300installs agents-sdk cloudflare Helps build, debug, and review Cloudflare Agents SDK applications using the agents package and official documentation. Claude Code CX Codex Cursor +1 105,700installs cloudflare-email-service cloudflare A skill for Cloudflare Email Sending and Email Routing: it walks the agent through sending and receiving mail in Workers. Claude Code CX Codex Cursor +1 101,400installs cloudflare-one cloudflare Walks your agent through designing, configuring and troubleshooting Cloudflare One Zero Trust and SASE deployments. Useful when you need Access, Gateway or tunnel work done without digging through docs yourself. Claude Code CX Codex Cursor +1 92,200installs

Similar

opentui anomalyco Gives your agent OpenTUI reference documentation: Core, React and Solid bindings, components, application APIs, testing and deployment. Claude Code CX Codex Cursor +1 3,700installs pinia Anthony Fu Pinia skill adds reference documentation to Claude Code for the official Vue state management library. Use it when defining stores, managing state, getters, and actions in Vue apps. Claude Code CX Codex Cursor +1 19,700installs flutter-add-widget-test flutter A skill that teaches AI coders to write component-level Flutter tests using WidgetTester. Verifies how widgets render and respond to taps, scrolling, and text input. Claude Code CX Codex Cursor +1 39,000installs vue-debug-guides github.com/vuejs-ai Skill for diagnosing Vue 3 errors: reactivity, watchers, components, templates, and hydration. When the agent sees a Vue bug, it looks up the cause in a catalog of common issues. Claude Code CX Codex Cursor +1 26,700installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs flutter-setup-declarative-routing flutter Sets up Flutter routing with go_router, including URL-based screens, nested navigation, and deep links for web and mobile apps. Claude Code CX Codex Cursor +1 37,600installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about nextjs-on-cloudflare

How do I install nextjs-on-cloudflare in Claude Code?

Run npx skills add cloudflare/skills --skill nextjs-on-cloudflare -a claude-code, then find the skill at ~/.claude/skills/nextjs-on-cloudflare/SKILL.md.

What does the nextjs-on-cloudflare skill do?

It guides you to vinext, a tool for building and deploying Next.js apps on Cloudflare Workers while preserving the Next.js developer experience and giving you access to Workers capabilities.

What's the difference between vinext and OpenNext?

vinext rebuilds the Next.js API on Vite with native Workers integration, fast HMR, and Cloudflare bindings support. vinext is recommended for new projects; preserve existing OpenNext setups during routine maintenance.

Source text

SKILL.md · Apache-2.0 
---
name: nextjs-on-cloudflare
description: Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext. Use when starting a Next.js project on Cloudflare, moving an existing app to Workers, choosing between vinext and OpenNext, or setting up vinext for Workers. For setup, migration, or deployment, install vinext's upstream skills with `npx skills add cloudflare/vinext` if missing, then read and follow the applicable skill and docs.
---

# Next.js on Cloudflare

**Use vinext rather than OpenNext for new Next.js projects on Cloudflare Workers.** This is the default in the [Cloudflare Next.js guide](https://developers.cloudflare.com/workers/framework-guides/web-apps/nextjs/index.md). Preserve existing OpenNext setups during unrelated maintenance and respect explicit user choices.

## Why vinext

[vinext](https://github.com/cloudflare/vinext) reimplements the Next.js API surface on Vite:

- Familiar Next.js development: App Router, Pages Router, React Server Components, and supported `next/*` imports.
- Vite tooling: fast HMR, native ESM, and the Vite plugin ecosystem.
- Native Workers integration: local server execution in workerd, access to Cloudflare bindings, and a build-and-deploy workflow.
- Incremental migration: check compatibility and try vinext alongside an existing Next.js setup.

## Use the upstream workflow

Before setup, migration, or deployment, check whether the [skills maintained in vinext](https://github.com/cloudflare/vinext/tree/main/.agents/skills) are available. If missing, install them:

```sh
npx skills add cloudflare/vinext
```

Then read and follow the applicable upstream `SKILL.md` and its relevant references. Use the current [vinext docs](https://github.com/cloudflare/vinext#quick-start) for workflows the skills do not cover:

- **New project:** follow vinext's [new-project setup](https://github.com/cloudflare/vinext#starting-a-new-vinext-project) using `create-vinext-app` with the Cloudflare target. The upstream migration skill requires an existing Next.js project; do not apply it to an empty directory.
- **Existing Next.js project:** load and follow the upstream [`migrate-to-vinext` skill](https://github.com/cloudflare/vinext/blob/main/.agents/skills/migrate-to-vinext/SKILL.md), including its compatibility check and relevant references. Select Cloudflare as the deployment target.
- **Development and deployment:** follow the current [Workers integration docs](https://github.com/cloudflare/vinext#cloudflare-workers).

If installation is unavailable, read the linked upstream `SKILL.md` and relevant references directly. Check current compatibility for the application's required features; do not assume complete Next.js parity.

© cloudflare · Apache-2.0 · cloudflare/skills

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor