4. Интегрируем Supabase — курс «Создаем сайт с помощью AI» — Вайбкэмп
Редакционный разбор
Практический урок по интеграции Supabase в проект, создаваемый с помощью AI. Будет полезен разработчикам начального уровня, которые хотят быстро добавить базу данных, хранилище и авторизацию без написания бэкенда вручную. Автор последовательно показывает регистрацию, установку CLI и MCP, настройку auth и деплой. Основное ограничение — видео является частью курса и предполагает наличие контекста предыдущих уроков; интерфейс и тарифы Supabase могли измениться после выхода ролика.
Что показано в видео
Видео является четвёртым уроком курса «Создаем сайт с помощью AI» (Вайбкэмп). Автор показывает, как подключить Supabase к уже созданному статическому сайту, чтобы добавить базу данных, файловое хранилище и закрытый раздел с авторизацией. В начале объясняется, зачем нужен Supabase и что это платформа класса Backend-as-a-Service. Затем демонстрируется регистрация в сервисе через GitHub, создание организации и нового проекта, выбор бесплатного тарифа. Далее устанавливаются MCP (Model Context Protocol) для интеграции с Cursor и Supabase CLI через Homebrew, а также добавляются Cursor Rules для работы с базой. Основная часть посвящена настройке авторизации: используется готовая UI-библиотека Supabase, создаются страницы логина, регистрации и восстановления пароля, настраиваются email-подтверждения и политики доступа. Показана интеграция авторизации на сайт: добавление ссылки в подвал, работа с компонентами через Cursor. В конце рассматривается деплой на Vercel, возникающие ошибки (например, отсутствие модуля Supabase SSR) и их решение. Также упоминаются особенности хранения секретов в файле .env.local и переменных окружения. Видео практическое, ориентировано на новичков, которые уже имеют базовый проект и хотят добавить бэкенд с помощью AI-инструментов.
Главные выводы
- Видео входит в практический курс по созданию сайта с помощью AI и опирается на ранее созданный проект, поэтому новичкам стоит начинать с первых уроков.
- Автор использует бесплатный тариф Supabase и показывает процесс регистрации через GitHub, что актуально для быстрого старта без оплаты.
- Демонстрируется установка MCP и Supabase CLI, что позволяет управлять проектом прямо из Cursor и автоматизировать рутинные операции.
- Настройка авторизации выполняется через готовую UI-библиотеку Supabase, включая страницы логина, регистрации и восстановления пароля.
- В уроке показано, как добавить скрытую ссылку на авторизацию в подвал сайта и настроить политики доступа для закрытого раздела.
- Деплой на Vercel сопровождается разбором типичной ошибки с отсутствием модуля Supabase SSR и способом её устранения.
- Ролик опубликован 12 декабря 2025 года, поэтому тарифы, интерфейс Supabase и версии инструментов могли измениться — актуальность стоит проверять.
Таймкоды и ключевые фрагменты
- 0:00
- Вступление и план урока
- 2:32
- Регистрация в Supabase и создание проекта
- 5:05
- Установка MCP для интеграции с Cursor
- 7:37
- Установка Supabase CLI и обновление версии
- 10:10
- Настройка авторизации через UI-библиотеку
- 12:42
- Интеграция компонентов авторизации в проект
- 15:15
- Управление пользователями и политиками доступа
- 17:47
- Добавление ссылки на авторизацию в подвал сайта
- 20:20
- Деплой на Vercel и ошибка с переменными окружения
- 22:52
- Решение проблемы с модулем Supabase SSR
Кому пригодится этот материал
Материал поможет тем, кто изучает Supabase — open source альтернатива Firebase на PostgreSQL и хочет заранее увидеть рассматриваемые возможности и сценарии использования.