vinext — скилл миграции с Next.js
vinext migration skill
Скилл Cloudflare ведет агента через перенос проекта с Next.js на vinext, реализацию API Next.js на Vite: проверка совместимости, конфиг и деплой
- 9 264 ★ репозитория
- Последний коммит
- MIT
Широкий доступ
Почему такой уровень
- Агент меняет `package.json`, переименовывает конфиги в `.cjs`, удаляет `next` и ставит `vinext` и `vite`
- Публикация командой `npx @vinext/cloudflare deploy` собирает и выкладывает приложение в ваш аккаунт Cloudflare через wrangler
- Другие платформы подключаются через плагин Nitro и переменную `NITRO_PRESET`, то есть сборка выполняет код из npm
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/vinext-migration-skillОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемШирокий доступИнструмент может менять данные, выполнять команды или работать с секретами.
- Агент меняет `package.json`, переименовывает конфиги в `.cjs`, удаляет `next` и ставит `vinext` и `vite`
- Публикация командой `npx @vinext/cloudflare deploy` собирает и выкладывает приложение в ваш аккаунт Cloudflare через wrangler
- Другие платформы подключаются через плагин Nitro и переменную `NITRO_PRESET`, то есть сборка выполняет код из npm
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл `migrate-to-vinext` из репозитория Cloudflare ведет агента через перенос проекта с Next.js на vinext, реализацию API Next.js поверх Vite. Он включается по просьбе перенести или переключить проект и сразу проверяет, что в `dependencies` или `devDependencies` есть `next`: если нет, скилл останавливается. Затем агент определяет менеджер пакетов по lock-файлу и тип маршрутизации: каталог `app/` означает App Router, один `pages/` означает Pages Router. Миграция идет в пять фаз. Сначала `vinext check` выдает отчет с оценкой совместимости. Затем рекомендуемая команда `vinext init` ставит `vite` (и `@vitejs/plugin-rsc` для App Router), добавляет `"type": "module"`, переименовывает CommonJS-конфиги в `.cjs`, дописывает скрипты `dev:vinext` и `build:vinext`, создает минимальный `vite.config.ts` и вносит `/dist/` и `.vinext/` в `.gitignore`. Прежняя настройка Next.js при этом продолжает работать. Если `init` не подошел, есть ручной путь: удалить `next`, поставить `vinext` и `vite`, заменить команды в скриптах. Четвертая фаза необязательная: публикация на Cloudflare Workers командой `npx @vinext/cloudflare deploy` или на другие платформы через плагин Nitro. Последняя фаза запускает сервер разработки и проверяет основные маршруты. Скилл запрещает менять код приложения и переписывать импорты `next/*`, копировать настройки webpack и Turbopack, удалять `next.config.js`. Привязки Cloudflare вроде D1, R2 и KV он подключает через `import { env } from "cloudflare:workers"`.
Для кого. Для разработчиков на Next.js, которые хотят проверить совместимость проекта с vinext и перенести его на Vite с помощью Claude Code, Cursor, Codex или OpenCode.
Подходит, если
- Нужно заранее узнать, какие возможности проекта на Next.js vinext не поддерживает: `vinext check` выдает оценку совместимости
- Проект на App Router или Pages Router хочется перенести на Vite без правки кода приложения
- Приложение надо выложить на Cloudflare Workers с привязками D1, R2 или KV
- Приложение надо запустить на Node.js, Vercel, Netlify или Deno Deploy через плагин Nitro
- После переноса нужно разобрать ошибки ESM, сторонних пакетов или деплоя по справочнику `troubleshooting.md`
Не подходит, если
- В `package.json` нет `next`: скилл на этой проверке останавливается
- Проект сильно зависит от Cache Components и Partial Prerendering: в vinext они реализованы частично, а вместо PPR предлагается директива `use cache`
- Вам нужна стабильность без оговорок: авторы пишут, что vinext в активной разработке и пока не заменяет Next.js для любого приложения
- Вы хотите остаться на сборке `next build`: vinext ее результат не использует
Пример запроса к агенту
Проверь, подойдет ли vinext для этого проекта на Next.js, и если да, перенеси его командой vinext init и запусти dev-серверОграничения
- Проект в активной разработке: авторы предупреждают, что vinext пока не заменяет Next.js для любого приложения, особенно в новых возможностях App Router, и просят оценить совместимость на своем коде. Репозиторий создан с помощью ИИ за неделю, по словам Cloudflare.
- Частично поддерживаются `next/image` (удаленные картинки через `@unpic` без оптимизации при сборке) и `next/font/google` (загрузка с CDN). Доменная локализация не работает, `next/jest` заменяется Vitest, настройки webpack и Turbopack игнорируются.
- Нативные модули вроде `sharp`, `satori` и `lightningcss` в режиме разработки App Router могут падать, в продакшен-сборке поддержка шире. Параметры `runtime` и `preferredRegion` не выбирают место запуска.
- Для привязок Cloudflare скилл требует `cloudflare:workers` и называет устаревшими `getPlatformProxy()` и собственные точки входа воркера.
- `vinext init` по умолчанию целится в Cloudflare, и агент обязан спросить вас о цели, затем передать `--platform=cloudflare` или `--platform=node`. Лицензия MIT.
Как отключить. Удалите папку `migrate-to-vinext` из каталога скиллов агента. Чтобы откатить сам перенос, верните изменения в `package.json`, `vite.config.ts` и `.gitignore` через git: прежние команды `next dev` и `next build` после `vinext init` остаются рабочими, пока вы не удалили пакет `next`.
Частые вопросы
Как поставить скилл и запустить миграцию?
Выполните `npx skills add cloudflare/vinext`, откройте проект на Next.js в Claude Code, OpenCode, Cursor или Codex и напишите «migrate this project to vinext». Скилл сам проверит совместимость, поставит зависимости, создаст конфиг и запустит сервер разработки. Прямую миграцию без агента делает `vinext init`.
Что меняет vinext init?
Команда запускает проверку, ставит `vite` и `@vitejs/plugin-rsc`, добавляет `"type": "module"`, переименовывает CommonJS-конфиги в `.cjs`, дописывает скрипты `dev:vinext` и `build:vinext`, создает `vite.config.ts` и правит `.gitignore`. Операция неразрушающая: Next.js продолжает работать рядом, и можно сначала проверить `dev:vinext`.
Нужно ли переписывать импорты next/link и next/image?
Нет. Импорты `next/*` vinext подменяет сам, поэтому скилл запрещает менять их на `vinext/*`. Каталоги `app/`, `pages/` и файл `next.config.js` остаются как есть, а конфиг читается для редиректов, заголовков, `basePath`, `i18n` и переменных окружения.
Куда можно развернуть перенесенное приложение?
На Cloudflare Workers командой `npx @vinext/cloudflare deploy`: там самая глубокая поддержка, включая привязки и кеш. На другие платформы идет путь через плагин Nitro, а целевую платформу задает `NITRO_PRESET`: `vercel`, `netlify`, `deno_deploy` или `node`.
Как получить доступ к D1, R2 и KV?
В серверном компоненте, обработчике маршрута или серверном действии импортируйте `env` из `cloudflare:workers`. Привязки описываются в `wrangler.jsonc`, а типы для TypeScript создает команда `wrangler types`. Работает это без собственной точки входа воркера.
Что проверить после переноса?
Запустите созданный скрипт `dev:vinext` или `npx vite dev`, убедитесь, что сервер стартует без ошибок, откройте ключевые маршруты и при сбое покажите полный вывод. Типовые ошибки ESM, сторонних пакетов и Cloudflare разобраны в файле `references/troubleshooting.md`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкиллы Next.js
Next.js skills
Официальный плагин Claude Code из репозитория Next.js: переход на Cache Components, Partial Prefetching и проверка изменений на живом dev-сервере
Vercel Plugin
vercel-plugin
Официальный плагин Vercel: граф экосистемы, скиллы по Next.js, AI SDK, деплою и хранилищам, агенты-специалисты и команды деплоя
Скиллы Vercel для агентов
Agent Skills
Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой
Скилл подсказывает агенту готовые composable-функции VueUse для Vue 3 и Nuxt и дает справку по использованию и типам каждой функции
Набор скиллов для разработки на Vue 3: практики Composition API, роутер, Pinia, тесты, JSX, Options API и разбор ошибок
shadcn-vue — скилл для агентов
shadcn-vue skill
Скилл shadcn-vue читает настройки вашего проекта и учит агента добавлять компоненты, формы и темы Vue-порта shadcn/ui по правилам библиотеки
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| vinext — скилл миграции с Next.js (эта запись) | да | 9 264 | ||
| Скиллы Next.js | нет | 143 191 | официальные скиллы самого Next.js: переход на Cache Components и Partial Prefetching без смены сборщика | |
| Next.js DevTools MCP | да | не нужна | 834 | подключает агента к запущенному dev-серверу Next.js 16 и новее: ошибки, маршруты, логи |
Коротко о README
Главная страница начинается со ссылки на анонс Cloudflare, предупреждения об активной разработке и перечня того, что уже работает и что еще не доделано. Дальше идут быстрый старт через `create-vinext-app` и `vinext init`, необязательная миграция с помощью агента, ручная настройка, справочник команд и параметров плагина, развертывание на Cloudflare и в режиме Node.js. В репозитории лежат пакеты `vinext`, `@vinext/cloudflare` и `create-vinext-app`, много примеров в `examples/`, сквозные тесты и замеры производительности. Скилл расположен в `.agents/skills/migrate-to-vinext` с тремя справочниками: совместимость, примеры конфигов и разбор ошибок.
Бейдж для README
Исходный SKILL.md
--- name: migrate-to-vinext description: Migrates Next.js projects to vinext (Vite-based Next.js reimplementation). Load when asked to migrate, convert, or switch from Next.js to vinext. Handles compatibility scanning, package replacement, Vite config generation, ESM conversion, and deployment setup (Cloudflare Workers natively, other platforms via Nitro). --- # Migrate Next.js to vinext vinext reimplements the Next.js API surface on Vite. Existing `app/`, `pages/`, and `next.config.js` work as-is — migration is a package swap, config generation, and ESM conversion. No changes to application code required. ## FIRST: Verify Next.js Project Confirm `next` is in `dependencies` or `devDependencies` in `package.json`. If not found, STOP — this skill does not apply. Detect the package manager from the lockfile: | Lockfile | Manager | Install | Uninstall | | --------------------------- | ------- | ------------- | --------------- | | `pnpm-lock.yaml` | pnpm | `pnpm add` | `pnpm remove` | | `yarn.lock` | yarn | `yarn add` | `yarn remove` | | `bun.lockb` / `bun.lock` | bun | `bun add` | `bun remove` | | `package-lock.json` or none | npm | `npm install` | `npm uninstall` | Detect the router: if an `app/` directory exists at root or under `src/`, it's App Router. If only `pages/` exists, it's Pages Router. Both can coexist. ## Quick Reference | Command | Purpose | | ---------------------------------- | ---------------------------------------------------------------------- | | `vinext check` | Scan project for compatibility issues, produce scored report | | `vinext init` | Automated migration — installs deps, generates config, converts to ESM | | `npx vite dev` | Development server with HMR | | `npx vite build` | Production build (multi-environment for App Router) | | `vinext start` | Local production server | | `npx @vinext/cloudflare deploy` | Build and deploy to Cloudflare Workers | | `vp exec vinext-cloudflare deploy` | Build and deploy to Cloudflare Workers with Vite+ | ## Phase 1: Check Compatibility Run `vinext check` (install vinext first if needed via `npx vinext check`). Review the scored report. If critical incompatibilities exist, inform the user before proceeding. See [references/compatibility.md](references/compatibility.md) for supported/unsupported features and ecosystem library status. ## Phase 2: Automated Migration (Recommended) Run `vinext init`. This command: