Integrating Airtable API with Website
Airtable is a spreadsheet-database hybrid with REST API. Popular as a no-code CMS: content managers edit records, the website reads via API. Suitable for catalogs, schedules, team pages, FAQs.
Airtable REST API
import Airtable from 'airtable';
const base = new Airtable({ apiKey: process.env.AIRTABLE_API_KEY })
.base(process.env.AIRTABLE_BASE_ID!);
async function getTeamMembers(): Promise<TeamMember[]> {
const records = await base('Team').select({
filterByFormula: "{Active} = TRUE()",
sort: [{ field: 'Order', direction: 'asc' }],
fields: ['Name', 'Role', 'Photo', 'Bio', 'LinkedIn'],
}).all();
return records.map(record => ({
id: record.id,
name: record.get('Name') as string,
role: record.get('Role') as string,
photo: (record.get('Photo') as Attachment[])?.[0]?.url,
bio: record.get('Bio') as string,
linkedin: record.get('LinkedIn') as string,
}));
}
Creating Records
async function createJobApplication(data: ApplicationData): Promise<string> {
const record = await base('Applications').create({
'Applicant Name': data.name,
'Email': data.email,
'Position': data.position,
'Message': data.message,
'Status': 'New',
'Applied At': new Date().toISOString(),
});
return record.id;
}
ISR (Incremental Static Regeneration) with Airtable
// Next.js: page revalidates every 60 seconds
export async function getStaticProps() {
const items = await getTeamMembers();
return {
props: { items },
revalidate: 60,
};
}
Airtable Webhooks (paid plans) can be used to invalidate cache when base data changes.
Implementation time: 1–2 business days.