AutoGineer
Generated banner for Nextjs On Cloudflare
Generated logo for Nextjs On Cloudflare

Nextjs On Cloudflare

CloudflareOfficialPublished by Cloudflare

  • Skill
  • Tool integration
  • Cloud and DevOps
  • Apache-2.0
  • No issues found
Download ZIP

From the author

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.
— the description by Cloudflare

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach for developers to leverage vinext for Next.js projects on Cloudflare Workers. It emphasizes using vinext as the preferred framework for new projects, offering guidance on how to integrate it with Vite tooling, manage migrations from existing Next.js setups, and access Cloudflare-specific bindings. The skill acts as a bridge to upstream vinext resources, ensuring users follow the latest recommended workflows for development and deployment.

What it does

  • Provides guidance on starting new Next.js projects using vinext on Cloudflare.
  • Outlines the process for migrating existing Next.js applications to the vinext framework.
  • Facilitates the installation of necessary upstream skills for Cloudflare integration.
  • Directs users to official documentation for specific deployment and development workflows.
  • Offers a feedback mechanism for reporting outdated or incorrect guidance within the skill.

When to use it

  • When starting a new Next.js project intended for deployment on Cloudflare Workers.
  • When planning to migrate an existing Next.js application to the Cloudflare Workers environment.
  • When evaluating the use of vinext versus other frameworks like OpenNext for Cloudflare.
  • When setting up the development environment for a vinext-based project.

Advantages

  • Leverages Vite for faster development cycles and improved HMR.
  • Provides native integration with Cloudflare Workers and environment bindings.
  • Supports standard Next.js features like App Router and React Server Components.
  • Enables incremental migration paths for existing applications.

Usage examples

“How do I start a new Next.js project on Cloudflare?”
The agent will guide you to use the vinext framework and provide the necessary steps to initialize your project with the Cloudflare target.
“I have an existing Next.js app. How can I move it to Cloudflare Workers?”
The agent will instruct you to install the upstream migration skill and follow the compatibility check process to transition your app to vinext.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/cloudflare/nextjs-on-cloudflare/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip nextjs-on-cloudflare.zip -d .agents/skills

Documentation by Cloudflare

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.

Skill feedback

If the user reports that this skill gave incorrect or outdated guidance, or is missing information, read references/skill-feedback.md.

Files

references/skill-feedback.md

Skill feedback

GitHub issues are public: anyone can read an issue once it is posted. Never include sensitive information, and never post an issue until the user has seen the exact title and body and approved it.

Use this when the user reports that the nextjs-on-cloudflare skill gave incorrect or outdated guidance, is missing information, or could be improved. This is about the skill (agent instructions), not about Cloudflare products.

What not to include

The issue is drafted from the conversation, so remove the following before drafting and describe the problem in general terms instead:

  • Credentials, API tokens, secrets, and passwords

  • Account IDs, zone IDs, and other resource identifiers

  • Customer or personal data, such as names, email addresses, and IP addresses

  • Internal hostnames and URLs

  • Private code, configuration, and logs

Steps

  1. Ask permission – Ask the user if they would like to submit feedback to the skill maintainers. If they decline, move on.

  2. Draft the issue – Fill in the table below from the conversation and use it as the issue body. Always identify which specific file and section caused the problem. Leave out everything listed in What not to include.

  3. Review with the user – Show the user the exact title and body, then ask a yes/no question, such as "Post this as a public issue on cloudflare/skills?" Submit only after the user answers yes. If they ask for changes, apply them and ask again. If they answer no, do not post. Agreeing to send feedback in step 1 is not approval of the text.

  4. Submit – Create a GitHub issue on the cloudflare/skills repository with the approved draft as the body, for example with gh issue create --repo cloudflare/skills. The title must follow this format: skill-feedback: nextjs-on-cloudflare: <summary of the problem>.

  5. Share the result – Share the issue URL with the user after submission. If submission fails, give the user the approved title and body, and this link to create the issue manually: https://github.com/cloudflare/skills/issues/new

Issue body

FieldValue
Typebug (incorrect guidance), outdated, missing, or improvement
Skillnextjs-on-cloudflare
SourceFile and section, e.g. SKILL.md > "Section name" or references/<file>.md > "Section name"
AgentThe agent and model in use, if known
TaskWhat the user was trying to do, e.g. "deploy a preview"
ExpectedWhat should have happened, e.g. "Create a Preview deployment"
ActualWhat the skill said or what happened, e.g. "Unknown option: --preview"
ImpactThe effect on the user, e.g. "Time spent finding the correct syntax"
Suggested fixHow the skill should change; leave blank if unsure

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Published by
Cloudflare
Publisher
Cloudflare (Official)
Source
cloudflare/skills · skills/nextjs-on-cloudflare · commit 6eb6c78
Licence
Apache License 2.0 (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Cloudflare.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download nextjs-on-cloudflare.zip