Next.js + Airtable Starter Project

A boilerplate Next.js + Airtable project

Purpose

I made this project with the purpose of getting acqauinted with Next.js and using the Airtable API. This project will get you some basics in place with a working example once you have created an Airtable Base.

View demo

https://nextjs-airtable-starter.vercel.app/

Getting started

Quick deploy

Deploy with Vercel

Setup your data store

Start a new Airtable 'Base' from a template called 'Project Tracker' by following the link (if you do not already have an Airtable account, creating your free Airtable account will be included in the creation flow.. fricken beautiful!).

Get the starter project code

1. Run the following in terminal to clone the project folder with files:

   git clone nextjs-airtable-starter

2. Install libraries:

   npm install

Setup environment variables for Airtable

1. Create a .env.local file in your project root or rename the included example .env.local.example to.env.local

2. Open .env.local in your editor of choice and add your Airtable credentials. It'll look something like this:

   AIRTABLE_API_KEY=key**************
   AIRTABLE_BASE_ID=app**************

   Visit your Airtable Account page to get your API key.

   The Airtable Base ID can be found in the Airtable API documentation under 'RATE LIMITS' or 'AUTHENTICATION'.

Test drive the app locally

1. Run the following in terminal:

   npm run dev

Deployment

That part is not covered here and is up to your discretion. Might I suggest Vercel?

Test included

1. Run the following in terminal:

   npm run test

   This will run a Jest test on the app.

   jest-fetch-mock is included to mock the fetch call to Airtable.

Thanks to the following resources/authors

• Airtable API documentation
• Next.js Getting Started documentation
• Next.js Environment Variable documentation
• "Setting Up Testing Library with NextJS" by Malcolm Laing
• "Building a Next.js static website based on Airtable" by Maxime Khoy