Автодеплой Next.js на Vercel с Windsurf AI

Вайб-кодинг в 2026 — это когда ты не воюешь с инфрой, а она работает на тебя. В этой статье покажу один конкретный кейс из реального проекта: как я собрал GitHub Actions пайплайн с Windsurf AI для автодеплоя React/Next приложения с Tailwind и shadcn/ui на Vercel. Без магии, без маркетинга, только инженерные решения и паттерны, которые можно забрать себе уже сегодня.

Контекст: небольшая fullstack-команда, Next.js 13+, App Router, Tailwind CSS и shadcn/ui для UI, Vercel как хостинг. Windsurf используем как инженерного агента: он помогает генерить yaml, проверять diff’ы и не забывать мелочи. Человек — в контроле, ИИ — в поддержке.

Почему Tailwind + shadcn/ui — база для вайб-кодинга

Tailwind CSS — утилитарный CSS-фреймворк, который позволяет собирать интерфейсы из готовых классов, а не писать кастомный CSS. В React классы задаются через className, что избегает конфликтов с зарезервированным class. Ключевое — purge: при правильной настройке content Tailwind вырезает неиспользуемые стили, и CSS остается легким, что критично для продакшена.

shadcn/ui поверх этого дает готовые доступные компоненты, которые живут прямо в репозитории. Нет черного ящика, все расширяемо. Именно эта комбинация хорошо масштабируется и идеально ложится в CI/CD.

Архитектура пайплайна: минимум шагов, максимум эффекта

Цель пайплайна простая: каждый merge в main — автоматический деплой на Vercel. Без ручных кликов. GitHub Actions выступает оркестратором, Vercel — исполнителем.

• Триггер: push в main
• Шаг 1: checkout кода
• Шаг 2: установка Node.js
• Шаг 3: установка зависимостей
• Шаг 4: build (Tailwind + Next)
• Шаг 5: deploy в Vercel

Никаких излишеств. Чем проще пайплайн, тем меньше он ломается.

GitHub Actions workflow

 name: Deploy to Vercel
 on:
 push:
 branches: [main]

 jobs:
 deploy:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4
 - uses: actions/setup-node@v4
 with:
 node-version: 20
 - run: npm ci
 - run: npm run build
 - run: npx vercel deploy --prod --token=${VERCEL_TOKEN}

Это база. Дальше начинается интересное — роль Windsurf.

Windsurf AI как инженерный агент в CI

Windsurf я использую не как «автопилот», а как парного инженера. Паттерн такой:

• Я описываю задачу на человеческом языке
• Windsurf генерирует черновик workflow
• Я ревьюю, режу лишнее, добавляю контекст

Например, он сразу подсказал вынести VERCEL_TOKEN в GitHub Secrets, добавить npm ci вместо install и зафиксировать Node 20. Мелочи, которые часто забываются.

Плюс — Windsurf хорошо ловит проблемы Tailwind: напоминает проверить content в tailwind.config.js, если после билда пропали стили. Это частая боль, особенно с динамическими классами, которые не purge’ятся.

Нюансы Tailwind и shadcn/ui в CI

Несколько практических моментов, которые всплыли в пайплайне:

• Всегда проверяйте content пути: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}']
• Не используйте динамические классы вида bg-${color}-500 — Tailwind их вырежет
• shadcn/ui лучше коммитить целиком, без npm-пакета

Tailwind в крупных проектах реально ускоряет разработку и уменьшает CSS-бандл, если purge настроен правильно. Это ощущается уже на CI, когда build становится быстрее.

Деплой на Vercel: без сюрпризов

Vercel хорошо дружит с GitHub Actions. Достаточно токена и проекта. CLI делает всю работу. Официальная документация Vercel подробно описывает этот флоу, и он стабилен уже несколько лет.

Важно: я отключаю автодеплой из Vercel UI и оставляю только CI. Один источник правды.

Итоговый вайб: человек + ИИ + простой CI

Этот пайплайн — не про «самый умный ИИ», а про правильное разделение ролей. GitHub Actions делает рутинную работу. Vercel — хостинг. Windsurf — инженерный ассистент, который подсвечивает ошибки и экономит время.

Если вы уже работаете с Next.js, Tailwind и shadcn/ui, я рекомендую пересобрать свой CI в этом ключе. Минимум шагов, максимум предсказуемости. Это и есть вайб-кодинг — когда деплой происходит сам, а ты фокусируешься на продукте.

В следующих статьях разберем, как подключить агентный ИИ к PR-флоу и ревью кода. А пока — забирайте паттерн, адаптируйте под себя и не усложняйте там, где можно проще.