How to load a list of images using getStaticProps in Nextjs?

Question

I have a bunch of images - 230 images to be exact, that I want to preload using getStaticProps. However, I don't know how to preload all of them using a for loop, as the end result was undefined when I tried to call it in the console.

export async function getStaticProps() {
 frameCount = 230
 for (let id = 1; id < frameCount; id++) {
  const res = await fetch (`https://${VERCEL_URL}/_next/image?url=%2F${id}.webp&w=1080&q=90`)
  const data = await res.json
 }
 return {
  props: {
   data
  }
 }
}

I am not very experienced in NextJS and this is the first time I tried using a for loop in a getStaticProps to get images being preloaded by the client. Any help would be appreciated!

Answer 1

You can use Promise.all :

export async function getStaticProps() {
  const frameCount = 230;

  const data = [];

  for (let id = 1; id <= frameCount; id++) {
    // add new promise to array
    data.push(fetch(`https://${VERCEL_URL}/_next/image?url=%2F${id}.webp&w=1080&q=90`).then((res) => res.json()));

  }
  
  return {
    props: {
      data: await Promise.all(data), // wait for all images to load
    }
  }
}