# Cache data globally in Next.js at build time

> Learn how to cache API data globally in Next.js at build time by writing it to a local JSON file with fs and reading it from getStaticProps on every page.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2021-05-16 | Topics: [Next.js](https://flaviocopes.com/tags/next/) | Canonical: https://flaviocopes.com/nextjs-cache-data-globally/

In my [Next.js](https://flaviocopes.com/nextjs/) 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](https://flaviocopes.com/json/) when it's first called, and subsequently it will read the data from the cache:

```js
import fs from 'fs'
import path from 'path'

function fetchMembersData() {
  console.log('Fetching members data...')
  return [{ email: 'test1@email.com' }, { email: 'test12@email.com' }]
}

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 

```js
import getMembers from 'lib/members'
```

and inside `getStaticProps()`:

```js
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:

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