Как пользоваться v0 от Vercel: гайд для новичков со скриншотами
Полный разбор v0.dev, воссозданный по реальному сбору новичка — Enhanced Prompt, селектор элементов, версии, деплой на Vercel в один клик, синхронизация с GitHub и база данных Supabase с входом. Каждый шаг — со скриншотом.
v0 коротко
- v0.dev — конструктор приложений от Vercel: описываете приложение обычным языком (или прикладываете скриншот или файл Figma) и получаете работающее Next.js-приложение с предпросмотром и кодом рядом.
- Enhanced Prompt — когда идея скудна, селектор элементов — чтобы переделать один компонент, список версий — чтобы откатить неудавшуюся итерацию.
- Деплой — один клик до Vercel, а синхронизация с GitHub отправляет каждую правку в ваш репозиторий — код никогда не заперт в v0.
- Настоящие данные приходят с интеграцией Supabase: создайте базу в настройках v0, дайте v0 выполнить его SQL-скрипт (сначала удалите строку JWT) — и у приложения появится вход по почте и данные по каждому пользователю.
How to use v0.dev by Vercel For Beginners
Исходное видео:Code with Nathan12:28
Скриншоты взяты из исходного видео и снабжены ссылками с таймкодами. Текст — наш собственный разбор по полной транскрипции; факты соответствуют записи.
Этот гайд — независимый иллюстрированный конспект для тех, кто предпочитает читать. Поддержать автора можно, посмотрев оригинал на канале Code with Nathan по ссылке выше.
Собираем приложение в v0, шаг за шагом
- 1
Начать с v0.dev
Создайте бесплатный аккаунт на v0.dev. В боковой панели — чаты и проекты; большое поле промпта в центре — отправная точка. Вокруг быстрые действия — клонировать скриншот, импорт из Figma, лендинги — а кнопка вложений принимает картинки и файлы Figma как дизайнерский ввод.
Поле ввода v0.dev с быстрыми действиями и выбором модели.Смотреть на 2:00 - 2
Развернуть идею через Enhanced Prompt
«Приложение для заметок» — слишком скудный ввод. Кнопка Enhanced Prompt перепишет его с ключевыми функциями, аутентификацией и адаптивным дизайном. Пропустите, если промпт уже подробный — расширение может увести приложение от вашей задумки. Для повседневного интерфейса оптимальна модель medium; large оставьте сложным сборкам.
Enhanced Prompt превращает одну строку в настоящее ТЗ.Смотреть на 2:15 - 3
Осмотреть проекты сообщества
Под полем ввода — галерея сообщества: портфолио, лендинги, игривые эксперименты. Open in v0 копирует проект в ваш аккаунт, где можно изучить код и переделать под себя. Быстрее, чем начинать с нуля, когда похожее уже есть.
Галерея сообщества: Open in v0 копирует проект вам.Смотреть на 3:00 - 4
Сгенерировать приложение
Демо-промпт: «приложение для заметок на markdown с папками, тегами, поиском и подсветкой синтаксиса». Enter — и v0 планирует, а затем стримит код в Code-вид, где файлы появляются вживую. Через минуту готовое приложение стоит в предпросмотре.
v0 стримит app/page.tsx во время генерации.Смотреть на 4:00 - 5
Проверить в предпросмотре
Пользуйтесь приложением как реальный пользователь, прежде чем что-то менять: отредактируйте заголовок и текст заметки, создайте заметки в папках, удалите одну, поищите в списке. Пробелы, найденные сейчас, — это один точный промпт вместо пяти расплывчатых потом.
Правка заголовка заметки в панели предпросмотра.Смотреть на 4:30 - 6
Переделать один элемент через селектор
Кнопка удаления теряется на панели инструментов — нажмите иконку селектора, выберите элемент и промптите только про него: «сделай фон этой кнопки удаления красным». v0 ограничит правку именно этим компонентом вместо перегенерации страницы — всё остальное останется стабильным.
Селектор элементов ограничивает промпт одним компонентом.Смотреть на 9:00 - 7
Откатываться через версии
Каждая генерация хранит свою версию. Откройте выпадающий список версий для сравнения, а Restore вернёт прежнее состояние, если итерация пошла вкривь — страховка, которая делает смелые промпты дешёвыми.
Карточка восстановления версии 2 — прошлые состояния в одном клике.Смотреть на 5:25 - 8
Задеплоить на Vercel
Кнопка Deploy отправляет приложение прямо на Vercel: бежит лог сборки, назначаются домены, и через минуту у приложения есть публичный адрес. Последующие правки задеплоятся в один клик из того же меню.
От предпросмотра до живого адреса — один клик.Смотреть на 6:00 - 9
Синхронизировать с GitHub
Нажмите иконку GitHub, авторизуйте v0, задайте имя репозитория и создайте его. Дальше каждая правка промптом уходит в ветку вашего репозитория — а код можно в любой момент скачать zip или подтянуть через npx. Ничего не заперто внутри v0.
Создание репозитория GitHub, куда v0 будет присылать изменения.Смотреть на 7:00 - 10
Подключить Supabase
Данные в браузере умирают вместе с браузером. Откройте Settings → Integrations → Supabase, примите условия, выберите регион и бесплатный тариф, создайте базу. v0 сам привяжет её к вашему проекту Vercel — без прыжков по панелям.
Диалог Supabase Create Database внутри v0.Смотреть на 8:30 - 11
Добавить вход по почте
Промпт: «Создай систему аутентификации по почте и паролю, все данные храни в Supabase». v0 сгенерирует страницы входа и регистрации плюс SQL-скрипт, который создаёт таблицы и политики безопасности. Сейчас данные живут в localStorage — этот шаг переносит их в настоящую базу.
v0 планирует систему аутентификации и готовит SQL-скрипт.Смотреть на 9:10 - 12
Выполнить SQL-скрипт — сначала удалить строку JWT
Ловушка, на которую указывает видео: если в скрипте есть строка, задающая app.jwt_secret, удалите её перед выполнением — она вызывает ошибку, ведь секрет уже настроен при создании Supabase. Затем запустите скрипт (Apply в v0), чтобы создать таблицы folders, notes и политики.
Скрипт создания таблиц — без строки JWT — готов к запуску.Смотреть на 9:30 - 13
Проверить данные вживую
Зарегистрируйтесь в предпросмотре, создайте заметки в папках и откройте приложение из другого браузера — всё на месте. Данные лежат в таблицах Supabase с разграничением по пользователям, а приложение стало настоящим фулстек-продуктом: фронт из промптов, база из интеграции, деплой на Vercel.
Вход выполнен, заметки сохраняются в Supabase.Смотреть на 10:10