Список поддерживаемых фреймворков

Чему вы научитесь

Познакомитесь с полным списком фреймворков, поддерживаемых функцией Vercel Deploy Agent Skills (45+ типов)
Понимайте принцип работы обнаружения фреймворков
Определите, поддерживается ли ваш проект для развертывания одним кликом
Просмотрите правила приоритета обнаружения фреймворков

Текущие проблемы

Вы хотите использовать функцию развертывания одним кликом Agent Skills, но не уверены, поддерживается ли фреймворк вашего проекта, или хотите понять, как работает логика обнаружения.

Основная идея

Функция Vercel Deploy Agent Skills сканирует файл package.json проекта, проверяя dependencies и devDependencies, последовательно обнаруживая предопределенные имена пакетов характеристик фреймворка для определения используемого фреймворка проекта.

Обнаружение по порядку приоритета: от наиболее конкретного фреймворка к наиболее общему, чтобы избежать ложных срабатываний. Например:

Обнаружение next → соответствует Next.js
Даже если одновременно есть react, приоритетно распознается как Next.js

Диапазон обнаружения

Обнаружение одновременно проверяет dependencies и devDependencies, поэтому даже если фреймворк установлен только как зависимость для разработки, он будет распознан.

Полный список фреймворков

Экосистема React

Фреймворк	Обнаружение зависимостей	Возвращаемое значение
Next.js	`next`	`nextjs`
Gatsby	`gatsby`	`gatsby`
Remix	`@remix-run/`	`remix`
React Router	`@react-router/`	`react-router`
Blitz	`blitz`	`blitzjs`
Create React App	`react-scripts`	`create-react-app`
Ionic React	`@ionic/react`	`ionic-react`
Preact	`preact`	`preact`

Экосистема Vue

Фреймворк	Обнаружение зависимостей	Возвращаемое значение
Nuxt	`nuxt`	`nuxtjs`
VitePress	`vitepress`	`vitepress`
VuePress	`vuepress`	`vuepress`
Gridsome	`gridsome`	`gridsome`

Экосистема Svelte

Фреймворк	Обнаружение зависимостей	Возвращаемое значение
SvelteKit	`@sveltejs/kit`	`sveltekit-1`
Svelte	`svelte`	`svelte`
Sapper (legacy)	`sapper`	`sapper`

Angular

Фреймворк	Обнаружение зависимостей	Возвращаемое значение
Angular	`@angular/core`	`angular`
Ionic Angular	`@ionic/angular`	`ionic-angular`

Генераторы статических сайтов

Фреймворк	Обнаружение зависимостей	Возвращаемое значение
Astro	`astro`	`astro`
Docusaurus	`@docusaurus/core`	`docusaurus-2`
Hexo	`hexo`	`hexo`
Eleventy	`@11ty/eleventy`	`eleventy`
RedwoodJS	`@redwoodjs/`	`redwoodjs`

Фреймворки Node.js Backend

Фреймворк	Обнаружение зависимостей	Возвращаемое значение
Express	`express`	`express`
NestJS	`@nestjs/core`	`nestjs`
Hono	`hono`	`hono`
Fastify	`fastify`	`fastify`
Elysia	`elysia`	`elysia`
h3	`h3`	`h3`
Nitro	`nitropack`	`nitro`

Другие фреймворки

Фреймворк	Обнаружение зависимостей	Возвращаемое значение
SolidStart	`@solidjs/start`	`solidstart-1`
Ember	`ember-cli`, `ember-source`	`ember`
Dojo	`@dojo/framework`	`dojo`
Polymer	`@polymer/`	`polymer`
Stencil	`@stencil/core`	`stencil`
UmiJS	`umi`	`umijs`
Saber	`saber`	`saber`
Sanity	`sanity`, `@sanity/`	`sanity` или `sanity-v3`
Storybook	`@storybook/`	`storybook`
Hydrogen (Shopify)	`@shopify/hydrogen`	`hydrogen`
TanStack Start	`@tanstack/start`	`tanstack-start`

Инструменты сборки

Фреймворк	Обнаружение зависимостей	Возвращаемое значение
Vite	`vite`	`vite`
Parcel	`parcel`	`parcel`

Статические HTML-проекты

Если ваш проект не имеет package.json (чистый статический веб-сайт), обнаружение фреймворка вернет null.

Скрипт развертывания интеллектуально обработает:

Автоматическое обнаружение файлов .html в корневом каталоге
Если есть только один файл .html и он не index.html, он будет автоматически переименован в index.html
Прямое развертывание как статического сайта на Vercel

Пример сценария:

bash

my-static-site/
└── demo.html  # будет автоматически переименован в index.html

Принципы обнаружения фреймворков

Процесс обнаружения

Чтение package.json
    ↓
Сканирование dependencies и devDependencies
    ↓
Сопоставление предопределенных имен пакетов по порядку приоритета
    ↓
Найдено первое сопоставление → возврат соответствующего идентификатора фреймворка
    ↓
Сопоставление не найдено → возврат null (статический HTML-проект)

Порядок обнаружения

Обнаружение сортируется по специфичности фреймворка, с приоритетным сопоставлением более конкретных фреймворков:

bash

# Пример: проект Next.js
dependencies:
  next: ^14.0.0        # сопоставление → nextjs
  react: ^18.0.0       # пропускается (уже есть более высокоприоритетное сопоставление)
  react-dom: ^18.0.0

Частичный порядок обнаружения:

Next.js, Gatsby, Remix, Blitz (конкретные фреймворки)
SvelteKit, Nuxt, Astro (мета-фреймворки)
React, Vue, Svelte (базовые библиотеки)
Vite, Parcel (общие инструменты сборки)

Правила обнаружения

Одновременная проверка dependencies и devDependencies
Последовательное сопоставление, возврат при нахождении первого
Сопоставление имен пакетов: точное сопоставление или сопоставление префикса
- Точное сопоставление: "next" → Next.js
- Сопоставление префикса: "@remix-run/" → Remix

bash

# Логика обнаружения shell (упрощенная версия)
has_dep() {
    echo "$content" | grep -q "\"$1\""
}

if has_dep "next"; then
    echo "nextjs"
fi

Как проверить фреймворк вашего проекта

Метод 1: Просмотр package.json

Откройте package.json проекта, найдите имена пакетов в списке выше в dependencies или devDependencies.

json

{
  "dependencies": {
    "next": "^14.0.0",  ← Next.js
    "react": "^18.0.0"
  }
}

Метод 2: Попробуйте развертывание

Используйте напрямую функцию Vercel Deploy:

Deploy my app to Vercel

Claude выведет обнаруженный фреймворк:

Detected framework: nextjs

Метод 3: Ручной запуск скрипта обнаружения

Если вы хотите протестировать заранее, можно запустить:

bash

bash skills/claude.ai/vercel-deploy-claimable/scripts/deploy.sh

Выведет обнаруженную информацию о фреймворке (stderr).

На что обратить внимание

Проблема 1: Неточное обнаружение фреймворка

Симптом:

Detected framework: vite
# но вы ожидаете nextjs

Причина: обнаружение по порядку приоритета, обнаружение Vite после Next.js, но если в проекте одновременно есть vite и next, может сопоставиться с Vite.

Влияние: обычно не влияет на развертывание, Vercel автоматически определит конфигурацию сборки.

Решение:

Проверьте зависимости в package.json
Если не влияет на развертывание, можно игнорировать
Развертывание все равно будет работать нормально, просто использует другую конфигурацию

Проблема 2: Проекта нет в списке

Симптом: фреймворк вашего проекта отсутствует в списке выше.

Возможные причины:

Это очень новый или нишевый фреймворк
Фреймворк использует другое имя пакета
Скрипт развертывания еще не добавил поддержку

Решение:

Проверьте, использует ли ваш проект Vite или Parcel и другие общие инструменты сборки
Попробуйте развертывание, Vercel может автоматически распознать
Если это статический HTML-проект, просто разверните
Отправьте PR в agent-skills для добавления поддержки фреймворка

Проблема 3: Мульти-фреймворковый проект

Симптом: проект одновременно использует несколько фреймворков (например, Remix + Storybook).

Поведение обнаружения: возвращает первый сопоставленный фреймворк по приоритету.

Влияние: обычно не влияет на развертывание, основной фреймворк будет правильно распознан.

Распространенные вопросы

Q: Мой фреймворк не в списке, можно ли развернуть?

A: Можно попробовать. Если проект использует Vite или Parcel и другие общие инструменты сборки, они могут быть распознаны как эти инструменты. Vercel также попытается автоматически определить конфигурацию сборки.

Q: Влияет ли ошибка обнаружения на развертывание?

A: Обычно нет. У Vercel есть мощный механизм автоматического обнаружения, даже если идентификатор фреймворка неточен, нормальная сборка и развертывание возможны.

Q: Как добавить поддержку нового фреймворка?

A: Измените функцию detect_framework() в deploy.sh, добавьте новые правила обнаружения, затем отправьте PR в agent-skills.

Q: Нужен ли package.json для статического HTML-проекта?

A: Нет. Чистые статические HTML-проекты (без сборки JavaScript) можно развернуть напрямую, скрипт автоматически обработает.

Итоги урока

Функция Vercel Deploy Agent Skills поддерживает 45+ фреймворков, охватывающих основные технологии фронтенда:

Основная ценность:

✅ Широкая поддержка фреймворков, полное покрытие React/Vue/Svelte/Angular
✅ Интеллектуальное обнаружение фреймворков, автоматическое определение типа проекта
✅ Поддержка статических HTML-проектов, развертывание без зависимостей
✅ Открытый исходный код, возможность расширения и добавления новых фреймворков

Принципы обнаружения:

Сканирование dependencies и devDependencies в package.json
Сопоставление предопределенных имен пакетов характеристик фреймворков по приоритету
Возврат соответствующего идентификатора фреймворка для использования Vercel

Дальнейшие действия: Просмотрите Учебник по развертыванию в Vercel одним кликом чтобы узнать, как использовать эту функцию.

Приложение: Справочник по исходному коду

Нажмите, чтобы раскрыть расположение исходного кода

Обновлено: 2026-01-25

Функция	Путь к файлу	Строки
Логика обнаружения фреймворка	`skills/claude.ai/vercel-deploy-claimable/scripts/deploy.sh`	11-156
Точка входа скрипта развертывания	`deploy.sh`	1-250
Обработка статического HTML	`deploy.sh`	192-205

Ключевые функции:

detect_framework(): обнаружение 45+ фреймворков из package.json (строки 11-156)
has_dep(): проверка существования зависимости (строки 23-25)

Порядок обнаружения фреймворков (частично):

Blitz (blitzjs)
Next.js (nextjs)
Gatsby (gatsby)
Remix (remix)
React Router (react-router)
TanStack Start (tanstack-start)
Astro (astro)
Hydrogen (hydrogen)
SvelteKit (sveltekit-1)
Svelte (svelte) ... (полный список см. строки 11-156)

Примеры возвращаемых значений:

Next.js: nextjs
Nuxt: nuxtjs
Статический HTML: null

Список поддерживаемых фреймворков ​

Чему вы научитесь ​

Текущие проблемы ​

Основная идея ​

Полный список фреймворков ​

Экосистема React ​

Экосистема Vue ​

Экосистема Svelte ​

Angular ​

Генераторы статических сайтов ​

Фреймворки Node.js Backend ​

Другие фреймворки ​

Инструменты сборки ​

Статические HTML-проекты ​

Принципы обнаружения фреймворков ​

Процесс обнаружения ​

Порядок обнаружения ​

Правила обнаружения ​

Как проверить фреймворк вашего проекта ​

Метод 1: Просмотр package.json ​

Метод 2: Попробуйте развертывание ​

Метод 3: Ручной запуск скрипта обнаружения ​

На что обратить внимание ​

Проблема 1: Неточное обнаружение фреймворка ​

Проблема 2: Проекта нет в списке ​

Проблема 3: Мульти-фреймворковый проект ​

Распространенные вопросы ​

Q: Мой фреймворк не в списке, можно ли развернуть? ​

Q: Влияет ли ошибка обнаружения на развертывание? ​

Q: Как добавить поддержку нового фреймворка? ​

Q: Нужен ли package.json для статического HTML-проекта? ​

Итоги урока ​

Приложение: Справочник по исходному коду ​

Список поддерживаемых фреймворков

Чему вы научитесь

Текущие проблемы

Основная идея

Полный список фреймворков

Экосистема React

Экосистема Vue

Экосистема Svelte

Angular

Генераторы статических сайтов

Фреймворки Node.js Backend

Другие фреймворки

Инструменты сборки

Статические HTML-проекты

Принципы обнаружения фреймворков

Процесс обнаружения

Порядок обнаружения

Правила обнаружения

Как проверить фреймворк вашего проекта

Метод 1: Просмотр package.json

Метод 2: Попробуйте развертывание

Метод 3: Ручной запуск скрипта обнаружения

На что обратить внимание

Проблема 1: Неточное обнаружение фреймворка

Проблема 2: Проекта нет в списке

Проблема 3: Мульти-фреймворковый проект

Распространенные вопросы

Q: Мой фреймворк не в списке, можно ли развернуть?

Q: Влияет ли ошибка обнаружения на развертывание?

Q: Как добавить поддержку нового фреймворка?

Q: Нужен ли package.json для статического HTML-проекта?

Итоги урока

Приложение: Справочник по исходному коду