How to Integrate Airtable with V0

You need two pieces of information from Airtable before writing any code: your Personal Access Token (PAT) and your Base ID. Both are available from the Airtable web interface. First, generate a Personal Access Token. Go to airtable.com/create/tokens (you can also reach this from your Airtable profile icon → Developer Hub → Personal access tokens). Click Create new token. Give it a descriptive name like 'V0 Frontend App'. For scopes, select at minimum data.records:read to fetch records. If you also want to write records (for forms), add data.records:write. Under Access, choose which specific bases the token can access — selecting only the base you need is more secure than granting access to all bases. Click Create token and copy the token value immediately — Airtable only shows it once. Second, find your Base ID. Go to airtable.com/api in a browser (you must be logged in). You will see a list of your bases. Click on the base you want to use. The URL of the API documentation page for that base will look like https://airtable.com/appXXXXXXXXXXXX/api/docs — the appXXXXXXXXXXXX part is your Base ID. Copy it. Finally, note the exact name of the table you want to query. Table names are case-sensitive in the Airtable API. If your table is called 'Products' in Airtable, your API calls must use exactly 'Products'. Check the name in your Airtable base to be sure — it appears as the tab name at the top of the table view. Keep these three values (PAT, Base ID, table name) handy — you will use them in the next steps.

Your Next.js API route will read Airtable credentials from environment variables. Add them to Vercel before writing the code, so the environment is ready when you deploy. Go to your Vercel Dashboard, open your project, click the Settings tab, and select Environment Variables from the left sidebar. Add the following variables: AIRTABLE_API_KEY: Set this to your Airtable Personal Access Token (the value starting with 'pat'). This is a secret — set it for Production, Preview, and Development environments. Never add a NEXT_PUBLIC_ prefix to this variable — that would expose the token in your browser-side JavaScript bundle. AIRTABLE_BASE_ID: Set this to your Base ID (the value starting with 'app'). This is not strictly a secret (it is visible in URLs when you share Airtable views), but keeping it in an environment variable makes it easy to change. AIRTABLE_TABLE_NAME: Set this to the exact name of your Airtable table. For example: Products, Team Members, or Inventory. Case-sensitive. Click Save for each variable. After adding all three, trigger a redeployment of your Vercel project by pushing any commit to your GitHub repository, or by clicking Redeploy in the Vercel dashboard. For local development, create a .env.local file in your project root with the same three variables. The V0-generated .gitignore already excludes .env.local, so this file will not be committed to GitHub.

1# .env.local — local development only, excluded from Git
2AIRTABLE_API_KEY=patXXXXXXXXXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
3AIRTABLE_BASE_ID=appXXXXXXXXXXXXXX
4AIRTABLE_TABLE_NAME=Products

Create the Next.js API route that fetches records from Airtable. This route runs on Vercel's serverless infrastructure and is never exposed to the browser, making it safe to use your Airtable API key here. Create the file app/api/airtable/records/route.ts. The route calls the Airtable REST API directly using the native fetch() function. The Airtable API endpoint for listing records is: https://api.airtable.com/v0/{baseId}/{tableName}. The Authorization header must include your PAT as a Bearer token. Airtable's API supports several useful query parameters: filterByFormula for filtering records based on field values, sort for specifying sort field and direction, maxRecords to limit the number of records returned, and pageSize for pagination. These are passed as query string parameters on the Airtable API URL. Airtable returns records in a paginated format — the response object has a records array and optionally an offset string. If offset is present in the response, there are more records to fetch. You can pass the offset back as a query parameter on the next request to get the next page. For most small-to-medium use cases, setting maxRecords=100 retrieves enough records in a single request without needing to handle pagination. The response from Airtable wraps each record in an object with id (the Airtable record ID), createdTime, and fields (an object with your column names as keys). Transform the response to flatten the fields for easier consumption in your V0 components — return an array of objects where each object combines the record ID with the field values.

1import { NextRequest, NextResponse } from 'next/server';
2
3interface AirtableRecord {
4  id: string;
5  createdTime: string;
6  fields: Record<string, unknown>;
7}
8
9interface AirtableResponse {
10  records: AirtableRecord[];
11  offset?: string;
12}
13
14export async function GET(request: NextRequest) {
15  const apiKey = process.env.AIRTABLE_API_KEY;
16  const baseId = process.env.AIRTABLE_BASE_ID;
17  const tableName = process.env.AIRTABLE_TABLE_NAME;
18
19  if (!apiKey || !baseId || !tableName) {
20    return NextResponse.json(
21      { error: 'Airtable configuration missing' },
22      { status: 500 }
23    );
24  }
25
26  const { searchParams } = new URL(request.url);
27  const filter = searchParams.get('filter') || '';
28  const sort = searchParams.get('sort') || 'Name';
29  const maxRecords = searchParams.get('maxRecords') || '100';
30
31  // Build Airtable API URL
32  const airtableUrl = new URL(
33    `https://api.airtable.com/v0/${baseId}/${encodeURIComponent(tableName)}`
34  );
35  airtableUrl.searchParams.set('maxRecords', maxRecords);
36  if (filter) {
37    airtableUrl.searchParams.set('filterByFormula', filter);
38  }
39  airtableUrl.searchParams.set('sort[0][field]', sort);
40  airtableUrl.searchParams.set('sort[0][direction]', 'asc');
41
42  try {
43    const response = await fetch(airtableUrl.toString(), {
44      headers: {
45        Authorization: `Bearer ${apiKey}`,
46        'Content-Type': 'application/json',
47      },
48      next: { revalidate: 60 }, // Cache for 60 seconds
49    });
50
51    if (!response.ok) {
52      const error = await response.text();
53      console.error('Airtable API error:', error);
54      throw new Error(`Airtable returned ${response.status}`);
55    }
56
57    const data: AirtableResponse = await response.json();
58
59    // Flatten records: combine id with fields for easier component use
60    const records = data.records.map((record) => ({
61      id: record.id,
62      createdTime: record.createdTime,
63      ...record.fields,
64    }));
65
66    return NextResponse.json({ records, total: records.length });
67  } catch (error) {
68    console.error('Failed to fetch Airtable records:', error);
69    return NextResponse.json(
70      { error: 'Failed to fetch records' },
71      { status: 500 }
72    );
73  }
74}

With the API route returning data, prompt V0 to generate the React components that display your Airtable records. The key to effective V0 prompts for data-driven components is specifying the exact field names from your Airtable table and the layout you want. Before prompting V0, visit /api/airtable/records in your browser (or after deploying, on your Vercel preview URL) to see the actual JSON structure returned. Note the exact field names — for example, if your Airtable table has a column called 'Product Name', the field key in the API response will be 'Product Name' with a space, not 'productName'. Copy these field names exactly to use in your V0 prompt. Tell V0 what the data structure looks like, what fields to display, and what layout to use. For a simple list, a table component works well. For rich content with images, a card grid is better. You can also ask V0 to add client-side filtering and sorting so users can explore the data without triggering additional API calls. Ask V0 to add a loading state (skeleton cards or a spinner) that shows while the fetch is in progress, and an error state that displays a friendly message if the API call fails. These polish the user experience significantly. Also ask V0 to handle empty states — a message like 'No records found' when the records array is empty. For searchable directories or catalogs, ask V0 to add a search input that filters the already-fetched records client-side. This avoids making additional API calls for every keystroke and provides an instant-feeling search experience for datasets under a few hundred records.

Many Airtable integrations need to write data back, not just read it. Contact forms, lead capture forms, waitlist signups, and feedback submissions are all common patterns where a V0 form component sends data to an API route that creates a new Airtable record. Create a POST handler in the same API route file (or a separate file at app/api/airtable/leads/route.ts for clarity). The Airtable REST API creates records by sending a POST request to https://api.airtable.com/v0/{baseId}/{tableName} with a JSON body containing a records array. Each record in the array has a fields object with the column name-value pairs to write. The V0 form component should POST to this API route with a JSON body containing the form field values. The API route validates the input, maps the field names to Airtable column names, and calls the Airtable API. On success, return a 200 response. On failure, return an appropriate error so the V0 component can show an error message to the user. For security, validate all incoming data server-side in the API route before writing to Airtable. Check that required fields are present, that email addresses match a valid format, and that text fields are within reasonable length limits. This prevents spam or malformed data from reaching your Airtable base. For complex integrations combining Airtable with email notifications, CRM workflows, or multi-step forms across several Airtable tables, RapidDev's team can help design the data architecture and API layer to keep everything organized.

1import { NextRequest, NextResponse } from 'next/server';
2
3interface LeadFormData {
4  fullName: string;
5  email: string;
6  company?: string;
7  message: string;
8}
9
10export async function POST(request: NextRequest) {
11  const apiKey = process.env.AIRTABLE_API_KEY;
12  const baseId = process.env.AIRTABLE_BASE_ID;
13
14  // Use a separate table name env var for leads, or fall back to default
15  const tableName = process.env.AIRTABLE_LEADS_TABLE || 'Leads';
16
17  if (!apiKey || !baseId) {
18    return NextResponse.json(
19      { error: 'Airtable configuration missing' },
20      { status: 500 }
21    );
22  }
23
24  let body: LeadFormData;
25  try {
26    body = await request.json();
27  } catch {
28    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
29  }
30
31  const { fullName, email, company, message } = body;
32
33  // Server-side validation
34  if (!fullName || !email || !message) {
35    return NextResponse.json(
36      { error: 'Name, email, and message are required' },
37      { status: 400 }
38    );
39  }
40
41  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
42  if (!emailRegex.test(email)) {
43    return NextResponse.json({ error: 'Invalid email address' }, { status: 400 });
44  }
45
46  const airtableUrl = `https://api.airtable.com/v0/${baseId}/${encodeURIComponent(tableName)}`;
47
48  try {
49    const response = await fetch(airtableUrl, {
50      method: 'POST',
51      headers: {
52        Authorization: `Bearer ${apiKey}`,
53        'Content-Type': 'application/json',
54      },
55      body: JSON.stringify({
56        records: [
57          {
58            fields: {
59              'Full Name': fullName,
60              Email: email,
61              Company: company || '',
62              Message: message,
63              'Submitted At': new Date().toISOString(),
64            },
65          },
66        ],
67      }),
68    });
69
70    if (!response.ok) {
71      const error = await response.text();
72      console.error('Airtable write error:', error);
73      throw new Error(`Airtable returned ${response.status}`);
74    }
75
76    return NextResponse.json({ success: true });
77  } catch (error) {
78    console.error('Failed to write to Airtable:', error);
79    return NextResponse.json(
80      { error: 'Failed to submit. Please try again.' },
81      { status: 500 }
82    );
83  }
84}