# Интеграция Baserow с Vercel - REST API для Next.js

> Free-версия Baserow отдаёт данные в Next.js на Vercel через REST API: серверные экшены для записи, кеширование ISR и переменные окружения для токена доступа.

Source: https://opennix.org/docs/baserow/integrations/vercel-integration/


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-токен)](/docs/baserow/webhook-api/personal-api-tokens/) Baserow с правами на чтение и создание записей.
- Существующий проект Next.js, подключённый к Git-репозиторию.
- Переменные окружения, настроенные в Vercel:
  - `BASEROW_API_TOKEN`
  - `BASEROW_API_URL`
  - `TABLE_ID`

## Сценарии использования

| Приложение | Роль фронтенда | Роль бэкенда |
|---|---|---|
| Система подбора персонала (ATS) | Показывает вакансии и формы отклика через SSR/SSG | Хранит данные вакансий и заявок кандидатов |
| Интернет-магазин | Отдаёт витрину товаров, оптимизированную под SEO | Управляет остатками, ценами и запасами |
| Программная генерация SEO-страниц | Динамически создаёт страницы по локациям и категориям | Хранит структурированные наборы данных для генерации страниц |
| Внутренние инструменты | Рабочие панели сотрудников с авторизацией на edge | Система учёта бизнес-данных |

## Настройка интеграции

### Шаг 1. Настройка базы данных

Создайте базу данных Baserow на основе шаблона Applicant Tracker или аналогичной структуры. Определите идентификаторы таблиц и создайте Database-токен с нужными правами доступа.

### Шаг 2. Настройка переменных окружения

Настройте переменные окружения Vercel с учётными данными API Baserow и идентификаторами таблиц.

### Шаг 3. Создание универсального коннектора

Соберите переиспользуемые функции запроса, которые берут на себя аутентификацию, кеширование и фильтрацию данных. Коннектор централизует логику обращения к API вместо того, чтобы разбрасывать запросы по компонентам.

### Шаг 4. Операции чтения

Замените жёстко заданные массивы данных на асинхронные вызовы функций коннектора. При отображении данных Baserow в шаблонах учитывайте сложные типы полей - [поля с одним выбором](/docs/baserow/field-types/single-select-field/) и [связанные записи](/docs/baserow/field-types/link-to-table-field/) возвращаются объектами, а не простыми строками.

### Шаг 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, запускаемые [вебхуками](/docs/baserow/webhook-api/webhooks/) Baserow, для мгновенной пересборки при изменении данных.

## Устранение неполадок

Частые ошибки и их причины:

- `401 Unauthorized` - проверьте, что формат токена включает префикс `Token` в заголовке авторизации.
- `404 Not Found` - убедитесь, что идентификаторы таблицы и строки указаны верно.
- `400 Bad Request` - проверьте, что имена полей в JSON точно совпадают с заголовками столбцов Baserow (с учётом регистра).

## Часто задаваемые вопросы

**Нужен ли для интеграции сторонний бэкенд?** Нет - [REST API Baserow](/docs/baserow/webhook-api/database-api/) и серверные функции Vercel полностью закрывают операции чтения и записи; отдельный сервер или платный шлюз не требуется.

**Где хранится токен API и почему это безопасно?** Токен передаётся только через переменные окружения Vercel и используется исключительно в серверных функциях и Server Actions - в клиентский JavaScript-бандл он не попадает.

**Чем отличается создание строки от обновления?** Создание новой строки выполняется методом POST на эндпоинт таблицы, а обновление существующей - методом PATCH на эндпоинт с идентификатором конкретной строки.

Смежные темы - [вебхуки Baserow](/docs/baserow/webhook-api/webhooks/) для запуска пересборки на изменение данных и [REST API базы данных](/docs/baserow/webhook-api/database-api/) для справочника по эндпоинтам чтения и записи.