Next.js on CloudflareSkill

Released Sep 5, 2026

1 views

Apache-2.0

Summary

Cloudflare's routing skill for Next.js on Workers — sends the agent to vinext, the Vite-based Next.js runtime Cloudflare now recommends ahead of OpenNext.

Features

Settles the vinext vs OpenNext choice before code is written
Installs and defers to the upstream vinext skills via npx skills add
Separate routes for new projects, migrations and deployment
Preserves existing OpenNext setups during unrelated maintenance

Install This Skill

Add this skill to your favorite AI agent in a few steps.

Any AI agent

This skill is plain instructions — it works with any assistant that accepts custom instructions or system prompts.

Copy the skill content with the button below.
Paste it into your agent's instruction file or system prompt (for example AGENTS.md, .cursorrules, or a custom instructions field).
Ask the agent to apply the skill whenever the task matches.

Claude Code & Claude apps

Claude loads skills automatically from its skills directory.

Claude Code

Create a skill folder — personal: ~/.claude/skills/cloudflare-nextjs/, or per-project: .claude/skills/cloudflare-nextjs/
Save the skill content as SKILL.md inside that folder.
Claude Code picks it up automatically and invokes it when relevant.

mkdir -p ~/.claude/skills/cloudflare-nextjs

Claude.ai / Claude Desktop

Enable Skills under Settings → Capabilities, then upload the skill (a folder or zip containing SKILL.md).

One-prompt install

Paste this prompt into any agent with web access and it will install the skill for you.

Install the "Next.js on Cloudflare" skill from Onei AI. Fetch https://onei.ai/skills/cloudflare-nextjs, extract the full skill content from the page, and save it where you load skills from (for Claude Code: .claude/skills/cloudflare-nextjs/SKILL.md). From now on, apply this skill whenever it is relevant to my request.

Skill Content

Markdown Content

Copy this content and use it with your preferred AI agent

---
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/). 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.

Description

Deploying Next.js to Cloudflare Workers has had two competing answers, and an agent that picks the wrong one writes a build pipeline the team then has to unpick. This official Cloudflare skill exists to settle that choice before any code is written.

Its guidance is direct: use vinext for new Next.js projects on Workers, matching the default in Cloudflare's own Next.js framework guide. vinext reimplements the Next.js API surface on top of Vite — App Router, Pages Router, React Server Components and the supported next/* imports — while giving you Vite's fast HMR, native ESM and plugin ecosystem. Because it runs locally in workerd, the dev server behaves like production and Cloudflare bindings are available throughout.

The skill is deliberately thin on API detail. Rather than duplicating documentation that ages badly, it routes to the skills maintained inside the vinext repository, installing them with npx skills add cloudflare/vinext when they are missing, then following the applicable upstream SKILL.md. Three paths are mapped explicitly: a new project via create-vinext-app with the Cloudflare target; an existing Next.js app through the upstream migrate-to-vinext skill and its compatibility check; and development and deployment through vinext's own workflow.

It also encodes the restraint that matters on a real codebase — existing OpenNext setups are preserved during unrelated maintenance, and an explicit user choice wins over the default. Useful for any team standing up Next.js on Workers, or weighing a migration off OpenNext. Apache-2.0.

Related Skills

Skill: Trail of Bits Static Analysis

by Trail of Bits

New

CodeQL, Semgrep and SARIF static-analysis toolkit from Trail of Bits: taint tracking, fast pattern scans and merged, deduplicated security findings for coding agents.

Development

Skill: Playwright CLI

by Microsoft

New

Microsoft's official Playwright skill — drives a real browser from the command line using accessibility snapshots and element refs, and plans, generates and heals Playwright tests.

Development

Skill: Google Maps Platform

by Google Maps Platform

New

Google's official agent skill for writing production Maps Platform code — grounded in freshly fetched docs, with a demo key path that needs no billing account.

Development

Skill: Use Railway

by Railway

New

Railway's official agent skill: create projects, provision databases and buckets, deploy, manage variables and domains, and read build failures back — from the CLI, API or MCP server.

Development

Browse all skills →