Интеграция Baserow с Vercel - REST API для Next.js
Vercel хостит фронтенд на Next.js, а открытая редакция Baserow выступает headless-хранилищем данных за тем же REST API, что используется во всех остальных интеграциях - без платного шлюза или сторонних сервисов посередине; ниже описаны архитектура связки, пошаговая настройка чтения и записи данных и приёмы производительности, которые стоит применить на проде.
Обзор
Документ описывает, как построить приложение по архитектуре headless CMS, соединив хостинг фронтенда на Vercel с управлением данными в Baserow. Такая связка разделяет ответственность: Vercel отвечает за доставку интерфейса, а Baserow - за хранение и структурирование контента.
Архитектура интеграции
Мостом между сервисами служит REST API:
- Операции чтения (GET): Vercel запрашивает списки данных из Baserow для отрисовки страниц.
- Операции записи (POST): серверные функции Vercel (Serverless Functions) безопасно отправляют данные форм в Baserow, не раскрывая токен в браузере.
Предварительные требования
- Database-токен (API-токен) Baserow с правами на чтение и создание записей.
- Существующий проект Next.js, подключённый к Git-репозиторию.
- Переменные окружения, настроенные в Vercel:
BASEROW_API_TOKENBASEROW_API_URLTABLE_ID
Сценарии использования
| Приложение | Роль фронтенда | Роль бэкенда |
|---|---|---|
| Система подбора персонала (ATS) | Показывает вакансии и формы отклика через SSR/SSG | Хранит данные вакансий и заявок кандидатов |
| Интернет-магазин | Отдаёт витрину товаров, оптимизированную под SEO | Управляет остатками, ценами и запасами |
| Программная генерация SEO-страниц | Динамически создаёт страницы по локациям и категориям | Хранит структурированные наборы данных для генерации страниц |
| Внутренние инструменты | Рабочие панели сотрудников с авторизацией на edge | Система учёта бизнес-данных |
Настройка интеграции
Шаг 1. Настройка базы данных
Создайте базу данных Baserow на основе шаблона Applicant Tracker или аналогичной структуры. Определите идентификаторы таблиц и создайте Database-токен с нужными правами доступа.
Шаг 2. Настройка переменных окружения
Настройте переменные окружения Vercel с учётными данными API Baserow и идентификаторами таблиц.
Шаг 3. Создание универсального коннектора
Соберите переиспользуемые функции запроса, которые берут на себя аутентификацию, кеширование и фильтрацию данных. Коннектор централизует логику обращения к API вместо того, чтобы разбрасывать запросы по компонентам.
Шаг 4. Операции чтения
Замените жёстко заданные массивы данных на асинхронные вызовы функций коннектора. При отображении данных Baserow в шаблонах учитывайте сложные типы полей - поля с одним выбором и связанные записи возвращаются объектами, а не простыми строками.
Шаг 5. Операции записи
Используйте Server Actions Next.js для безопасной обработки отправки форм. Директива "use server" гарантирует, что функция выполняется на сервере, где токен API остаётся недоступным для просмотра в браузере.
Server Actions принимают данные формы, валидируют и очищают их, а затем отправляют POST-запрос на эндпоинт создания записи в Baserow. Такой подход избавляет от необходимости в отдельной бэкенд-инфраструктуре.
Шаг 6. Обновление против создания
Для создания строк используется метод POST, а для обновления существующих строк - PATCH с идентификатором строки, добавленным к URL.
Оптимизация производительности
Стратегия кеширования: используйте инкрементальную статическую регенерацию (ISR) с next: { revalidate: 60 }, чтобы кешировать контент и одновременно проверять обновления в фоне.
Санитизация данных: фильтруйте чувствительные поля на сервере до отправки во фронтенд, чтобы конфиденциальные данные не попадали в браузер.
Работа с изображениями: используйте компонент Image из Next.js с настроенными remote-паттернами для доменов Baserow, чтобы включить автоматическую оптимизацию.
Обновления в реальном времени: при необходимости настройте Vercel Deploy Hooks, запускаемые вебхуками Baserow, для мгновенной пересборки при изменении данных.
Устранение неполадок
Частые ошибки и их причины:
401 Unauthorized- проверьте, что формат токена включает префиксTokenв заголовке авторизации.404 Not Found- убедитесь, что идентификаторы таблицы и строки указаны верно.400 Bad Request- проверьте, что имена полей в JSON точно совпадают с заголовками столбцов Baserow (с учётом регистра).
Часто задаваемые вопросы
Нужен ли для интеграции сторонний бэкенд? Нет - REST API Baserow и серверные функции Vercel полностью закрывают операции чтения и записи; отдельный сервер или платный шлюз не требуется.
Где хранится токен API и почему это безопасно? Токен передаётся только через переменные окружения Vercel и используется исключительно в серверных функциях и Server Actions - в клиентский JavaScript-бандл он не попадает.
Чем отличается создание строки от обновления? Создание новой строки выполняется методом POST на эндпоинт таблицы, а обновление существующей - методом PATCH на эндпоинт с идентификатором конкретной строки.
Смежные темы - вебхуки Baserow для запуска пересборки на изменение данных и REST API базы данных для справочника по эндпоинтам чтения и записи.