К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

nextjs-on-cloudflare — скилл для Claude Code: Next.js на Cloudflare

Скилл для развёртывания Next.js приложений на Cloudflare Workers через vinext. Используй для новых проектов, миграции существующих приложений или выбора между vinext и OpenNext.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add cloudflare/skills --skill nextjs-on-cloudflare -a claude-code
Открыть на GitHub

Что делает nextjs-on-cloudflare

Скилл nextjs-on-cloudflare направляет на vinext — переиспользование Next.js API на Vite. Это значит знакомая разработка (App Router, Pages Router, React Server Components), быстрый HMR, нативная интеграция с Workers и доступ к биндингам Cloudflare прямо в локальном workerd.

Скилл работает в паре с upstream-скиллами из репозитория vinext. Для нового проекта, миграции или развёртывания сначала выполни npx skills add cloudflare/vinext — это подтянет актуальные инструкции. Если скиллы недоступны, читай документацию напрямую: новый проект создаёшь через create-vinext-app, существующий Next.js переносишь через migrate-to-vinext, deployment настраиваешь в Workers integration docs.

Важно: не предполагай полное соответствие Next.js. Перед миграцией проверь совместимость нужных тебе возможностей приложения.

Какие задачи решает

  • развернуть новый Next.js проект на Cloudflare Workers
  • перенести существующее Next.js приложение с Next.js на vinext
  • выбрать между vinext и OpenNext для Workers
  • настроить локальную разработку с доступом к Cloudflare биндингам

Примеры запросов агенту

  • Установи скилл nextjs-on-cloudflare для Claude Code и помоги создать новый проект на vinext
  • Мне нужно перенести Next.js приложение на Cloudflare Workers — используй migrate-to-vinext
  • Проверь совместимость моего Next.js проекта с vinext перед миграцией

Как установить nextjs-on-cloudflare

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/nextjs-on-cloudflare/

Из того же набора13

Весь набор →
cloudflare cloudflare Помогает агенту подбирать сервисы Cloudflare под задачи проекта, от хостинга до очередей и AI, и выбирать между CLI cf и Wrangler. Claude Code CX Codex Cursor +1 136 500установок wrangler cloudflare Помогает запускать команды Wrangler CLI, настраивать конфигурации и отлаживать деплой Cloudflare Workers в существующих проектах. Claude Code CX Codex Cursor +1 128 500установок workers-best-practices cloudflare Скилл настраивает ИИ на проверку продакшен-кода Cloudflare Workers по актуальным правилам рантайма, типам Wrangler и антипаттернам. Claude Code CX Codex Cursor +1 124 900установок durable-objects cloudflare Скилл помогает создавать, отлаживать и проверять Cloudflare Durable Objects для состояния, координации и постоянных соединений. Claude Code CX Codex Cursor +1 109 700установок web-perf cloudflare Пошаговый аудит Core Web Vitals, диагностика медленной загрузки и поиск блокирующих скриптов прямо в терминале. Claude Code CX Codex Cursor +1 109 300установок agents-sdk cloudflare Помогает создавать, отлаживать и проверять приложения на базе Cloudflare Agents SDK и пакета agents с актуальной документацией. Claude Code CX Codex Cursor +1 105 700установок cloudflare-email-service cloudflare Скилл для работы с Cloudflare Email Sending и Email Routing: помогает настроить отправку и приём писем в Workers. Claude Code CX Codex Cursor +1 101 400установок cloudflare-one cloudflare Помогает агенту проектировать, настраивать и разбирать развёртывания Cloudflare One Zero Trust и SASE. Пригодится, когда нужно спланировать Access, Gateway или туннели без похода в документацию вручную. Claude Code CX Codex Cursor +1 92 200установок

Похожие

opentui anomalyco Подключает к агенту справочную документацию OpenTUI: Core, React и Solid, компоненты, API приложений, тестирование и деплой. Claude Code CX Codex Cursor +1 3 700установок pinia Anthony Fu Скилл Pinia добавляет в Claude Code справку по официальной библиотеке управления состоянием Vue. Помогает при создании хранилищ, работе с состоянием, геттерами и действиями в Vue-приложениях. Claude Code CX Codex Cursor +1 19 700установок flutter-add-widget-test flutter Скилл помогает писать компонентные тесты Flutter с помощью WidgetTester. Проверяет, как виджет отображается и реагирует на касания, скролл и ввод текста. Claude Code CX Codex Cursor +1 39 000установок vue-debug-guides github.com/vuejs-ai Скилл для диагностики ошибок Vue 3: реактивность, watchers, компоненты, шаблоны и hydration. Когда агент видит баг во Vue-проекте, он находит причину по каталогу типовых проблем. Claude Code CX Codex Cursor +1 26 700установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок flutter-add-widget-preview flutter Скилл учит агента создавать интерактивные превью виджетов во Flutter через package:flutter/widget_previews.dart. Пригодится для изолированной вёрстки UI без сборки всего приложения. Claude Code CX Codex Cursor +1 36 600установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о nextjs-on-cloudflare

Как установить nextjs-on-cloudflare в Claude Code?

Выполни npx skills add cloudflare/skills --skill nextjs-on-cloudflare -a claude-code, затем найди скилл в ~/.claude/skills/nextjs-on-cloudflare/SKILL.md.

Что делает nextjs-on-cloudflare?

Скилл направляет на vinext — инструмент для разработки и развёртывания Next.js приложений на Cloudflare Workers с сохранением привычного Next.js опыта разработки и доступом к Workers возможностям.

В чём разница между vinext и OpenNext?

vinext переиспользует Next.js API на Vite с нативной интеграцией Workers, быстрым HMR и поддержкой Cloudflare биндингов. Для новых проектов vinext — рекомендуемый выбор; существующие OpenNext setup сохраняй при плановом обслуживании.

Исходный текст

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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой