Tengo un montón de imágenes, 230 imágenes para ser exactos, que quiero precargar usando getStaticProps. Sin embargo, no sé cómo precargarlos todos usando un bucle for, ya que el resultado final no estaba definido cuando traté de llamarlo en la consola.
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 } } }No tengo mucha experiencia en NextJS y esta es la primera vez que intento usar un bucle for en un getStaticProps para que el cliente precargue las imágenes. ¡Cualquier ayuda sería apreciada!
Puedes usar 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 } } }