# Baserow Vercel Integration - REST API for Next.js Apps

> Server Actions on Vercel post form data into Baserow rows, while ISR caching and the free REST API keep Next.js pages fast without a paid gateway service.

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


Vercel hosts a Next.js frontend while the open-source edition of Baserow acts as the headless data store behind the same REST API used across every other integration - no paid gateway or third-party middleware required; this guide covers the architecture, a step-by-step read and write setup, and the performance practices worth applying before going to production.

## Overview

This guide explains how to build an application on a headless CMS architecture by pairing Vercel's frontend hosting with Baserow's data management. The split keeps concerns separate: Vercel handles interface delivery while Baserow handles content storage and structure.

## Architecture

The REST API is the bridge between the two services:

- **Read operations (GET)**: Vercel fetches data listings from Baserow to render pages.
- **Write operations (POST)**: Vercel Serverless Functions send form submissions to Baserow securely, keeping the token out of the browser.

## Prerequisites

- A Baserow [database (API) token](/docs/baserow/webhook-api/personal-api-tokens/) with Read and Create permissions.
- An existing Next.js project connected to a Git repository.
- Environment variables configured in Vercel:
  - `BASEROW_API_TOKEN`
  - `BASEROW_API_URL`
  - `TABLE_ID`

## Use Cases

| Application | Frontend Role | Backend Role |
|---|---|---|
| Applicant tracking (ATS) | Displays job listings and application forms via SSR/SSG | Stores job data and applicant submissions |
| E-commerce | Serves a product storefront optimized for SEO | Manages inventory, pricing, and stock levels |
| Programmatic SEO | Generates location and category landing pages dynamically | Stores structured datasets that power page generation |
| Internal tools | Employee work portals with edge authentication | System of record for business data |

## Implementation Steps

### Step 1: Set Up the Database

Create a Baserow database from the Applicant Tracker template or a similar structure. Identify the table IDs and create a database token with the permissions the app needs.

### Step 2: Configure Environment Variables

Configure Vercel's environment variables with the Baserow API credentials and table identifiers.

### Step 3: Build a Universal Connector

Build reusable fetch functions that handle authentication, caching, and data filtering. The connector centralizes API communication logic instead of scattering fetch requests throughout components.

### Step 4: Implement Read Operations

Replace hardcoded data arrays with async calls to the connector functions. When rendering Baserow data in templates, account for complex field types - [single select fields](/docs/baserow/field-types/single-select-field/) and [linked records](/docs/baserow/field-types/link-to-table-field/) come back as objects rather than plain strings.

### Step 5: Implement Write Operations

Use Next.js Server Actions to handle form submissions securely. The `"use server"` directive guarantees the function runs server-side, where the API token stays out of reach of browser inspection.

Server Actions receive the form data, validate and sanitize it, then POST to Baserow's row-creation endpoint. This pattern removes the need for a separate backend service.

### Step 6: Update vs. Create

Creating a row uses the POST method, while updating an existing row uses PATCH with the row ID appended to the URL.

## Performance Optimization

**Caching strategy**: implement Incremental Static Regeneration (ISR) with `next: { revalidate: 60 }` to serve cached content while checking for updates in the background.

**Data sanitization**: filter sensitive fields server-side before sending a response to the frontend, so confidential data never reaches the browser.

**Image handling**: use the Next.js Image component with remote patterns configured for Baserow's domains to get automatic image optimization.

**Real-time updates**: optionally configure Vercel Deploy Hooks triggered by Baserow [webhooks](/docs/baserow/webhook-api/webhooks/) for instant rebuilds when data changes.

## Troubleshooting

Common errors and their causes:

- `401 Unauthorized` - check that the token format includes the `Token` prefix in the authorization header.
- `404 Not Found` - confirm the table ID and row ID are correct.
- `400 Bad Request` - make sure the JSON field names match Baserow's column headers exactly, including case.

## Frequently Asked Questions

**Does this integration need a separate backend?** No - the [Baserow REST API](/docs/baserow/webhook-api/database-api/) and Vercel's serverless functions cover both read and write operations end to end; no extra server or paid gateway is required.

**Where does the API token live, and why is that safe?** The token only ever travels through Vercel's environment variables and is used exclusively inside serverless functions and Server Actions - it never ships in the client-side JavaScript bundle.

**What is the difference between creating and updating a row?** Creating a new row is a POST request to the table endpoint, while updating an existing row is a PATCH request to the endpoint for that specific row ID.

Related reading: [Baserow webhooks](/docs/baserow/webhook-api/webhooks/) for triggering a rebuild when data changes, and the [database REST API reference](/docs/baserow/webhook-api/database-api/) for the full list of read and write endpoints.