mcpField
N
nextjs-on-cloudflare

nextjs-on-cloudflare

github.com/cloudflareCloud & DevOps3.2k44.9k installsUpdated today
Repository

About nextjs-on-cloudflare

A skill for developing and deploying Next.js projects on Cloudflare, recommending vinext for new projects and preserving existing OpenNext setups during unrelated maintenance. It directs users to upstream skills and current compatibility guidance.

Key features

  1. 01vinext guidance for new projects
  2. 02Migration guidance for existing projects
  3. 03Cloudflare deployment workflow references
  4. 04Compatibility checks
  5. 05Upstream skill discovery and installation

Use cases

  1. 01Starting a Next.js project for Cloudflare Workers
  2. 02Evaluating migration of an existing Next.js app
  3. 03Checking support for required Next.js features
  4. 04Finding current development and deployment instructions

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/cloudflare/skills --skill nextjs-on-cloudflare

After installing, type/nextjs-on-cloudflarein Claude Code to confirm it loaded.

Details

From the project README

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. Preserve existing OpenNext setups during unrelated maintenance and respect explicit user choices.

Why vinext

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 are available. If missing, install them:

npx skills add cloudflare/vinext

Then read and follow the applicable upstream SKILL.md and its relevant references. Use the current vinext docs for workflows the skills do not cover:

  • New project: follow vinext's new-project setup 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, including its compatibility check and relevant references. Select Cloudflare as the deployment target.
  • Development and deployment: follow the current Workers integration docs.

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.

Comments

Markdown supported