In my Next.js based website had the need to fetch data from an API at build time.

I tried various solutions, nothing worked. Then after lots of research and trial and error, here’s what worked.

The solution works both on localhost (development) and on Vercel (production).

This is the scenario: I have the emails of the “members” stored somewhere. It can be a remote database, Airtable, anything.

I only want to download this data once, and then have it available on the website, until I trigger the next build.

This members list is very static. It might change once a day max. If this list changes, I will just programmatically trigger a redeploy on Vercel using their Deploy Hooks.

Here’s the plan. We’ll create a local cache of the data, in a .members file.

A function in the lib/members.js file will take care of fetching the data and storing it in the cache as JSON when it’s first called, and subsequently it will read the data from the cache:

import fs from 'fs'
import path from 'path'

function fetchMembersData() {
  console.log('Fetching members data...')
  return [{ email: '[email protected]' }, { email: '[email protected]' }]
}

const MEMBERS_CACHE_PATH = path.resolve('.members')

export default async function getMembers() {
  let cachedData

  try {
    cachedData = JSON.parse(
      fs.readFileSync(path.join(__dirname, MEMBERS_CACHE_PATH), 'utf8')
    )
  } catch (error) {
    console.log('Member cache not initialized')
  }

  if (!cachedData) {
    const data = fetchMembersData()

    try {
      fs.writeFileSync(
        path.join(__dirname, MEMBERS_CACHE_PATH),
        JSON.stringify(data),
        'utf8'
      )
      console.log('Wrote to members cache')
    } catch (error) {
      console.log('ERROR WRITING MEMBERS CACHE TO FILE')
      console.log(error)
    }

    cachedData = data
  }

  return cachedData
}

Now inside any page we can add

import getMembers from 'lib/members'

and inside getStaticProps():

const members = await getMembers()

Now with this data we can do what we want.

A quick example is to add members to the props object returned by getStaticProps, adding it to the props received by the page component, and we can iterate over it in the page:

{members?.map((member) => {
  return (
    <p key={member.email} className='mt-3'>
      {member.email}
    </p>
  )
})}