Next.js on Cloudflare skill
Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext.
by cloudflare·Apache-2.0 license·★ 2,976 Stars on the repo·GitHub ↗
Use now
npx degit cloudflare/skills/skills/nextjs-on-cloudflare#main ~/.claude/skills/nextjs-on-cloudflareChecked ·commit main
Files of Next.js on Cloudflare
SKILL.md
Show the full text34 lines
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-appwith 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-vinextskill, 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.
| 1 | |
| 2 | name nextjs-on-cloudflare |
| 3 | 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. |
| 4 | |
| 5 | |
| 6 | # Next.js on Cloudflare |
| 7 | |
| 8 | **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. |
| 9 | |
| 10 | ## Why vinext |
| 11 | |
| 12 | [vinext] reimplements the Next.js API surface on Vite: |
| 13 | |
| 14 | Familiar Next.js development: App Router, Pages Router, React Server Components, and supported `next/*` imports. |
| 15 | Vite tooling: fast HMR, native ESM, and the Vite plugin ecosystem. |
| 16 | Native Workers integration: local server execution in workerd, access to Cloudflare bindings, and a build-and-deploy workflow. |
| 17 | Incremental migration: check compatibility and try vinext alongside an existing Next.js setup. |
| 18 | |
| 19 | ## Use the upstream workflow |
| 20 | |
| 21 | Before setup, migration, or deployment, check whether the [skills maintained in vinext] are available. If missing, install them: |
| 22 | |
| 23 | |
| 24 | npx skills add cloudflare/vinext |
| 25 | |
| 26 | |
| 27 | 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: |
| 28 | |
| 29 | **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. |
| 30 | **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. |
| 31 | **Development and deployment:** follow the current [Workers integration docs]. |
| 32 | |
| 33 | 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. |
| 34 |
Discussion
Alternatives
SupabaseUse when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, declarative schemas, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector); debugging and troubleshooting errors or unexpected behavior on Supabase projects (HTTP errors, Postgres errors, RLS surprises, permission denied, schema cache issues, timeouts, Edge Function crashes, Realtime drops, Storage failures) and reading or querying logs (Logs Explorer, ClickHouse).Next.js Specialized Front-End DeveloperAct as a specialized front-end developer with expertise in Next.js, focusing on building dynamic and efficient web applications.
Next.js App Router PatternsMaster Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
Deal deskUse when reviewing a specific inbound deal before close — when sales has asked for a discount that exceeds AE authority, when the customer has redlined the MSA, when per-deal economics (margin after discount, multi-year payment shape, indemnity exposure) need to be quantified, or when discount approval needs to be routed to a named human approver (Sales Director, VP Sales, CFO, CRO, General Counsel). Covers deal review, discount approval routing, per-deal margin scoring, deal exception handling, MSA redline triage, contract landmine detection (uncapped indemnity, MFN, perpetual license-back, missing DPA), and named-approver chain assembly. NEVER auto-approves — every output is a numeric scorecard plus a routing recommendation to a named human.
Next.js App Router PatternsMaster Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.Deal deskUse when reviewing a specific inbound deal before close — when sales has asked for a discount that exceeds AE authority, when the customer has redlined the MSA, when per-deal economics (margin after discount, multi-year payment shape, indemnity exposure) need to be quantified, or when discount approval needs to be routed to a named human approver (Sales Director, VP Sales, CFO, CRO, General Counsel). Covers deal review, discount approval routing, per-deal margin scoring, deal exception handling, MSA redline triage, contract landmine detection (uncapped indemnity, MFN, perpetual license-back, missing DPA), and named-approver chain assembly. NEVER auto-approves — every output is a numeric scorecard plus a routing recommendation to a named human.Browse more free Claude skills or everything in Development.