TypeError: Cannot read properties of undefined (reading 'map') NEXTJS

Question

I am trying to fetch an image from this API by using getStaticProps but I can't seem to get it.

If I add a '?' to the code like this then in the log it says 'undefined'. Why can't I fetch it?

<div>
  {hotelPics.map((hotelpic)=> (
  <Image src={hotelpic.url} />
  ))}
</div>

this is the code

import Image from 'next/image';
import React from 'react'


function Images({hotelPics }) {
 
    console.log(hotelPics);
    
    return (
        <div>
    {hotelPics.map((hotelpic)=> (
        <Image src={hotelpic.url}/>
    ))}    
        </div>
    )
}

export async function getStaticProps() {
    const res= await fetch ('https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG')
    const hotelPics = await res.json()

return {
    props: {
        hotelPics,
    },
}

}

export default Images

Answer 1

getStaticProps are "compiling" at build time, so you need to check isFallback variable

Also, you have nested images array in hotelPics array returned from getStaticProps

import Image from 'next/image';
import { useRouter } from 'next/router';
import React from 'react'


function Images({hotelPics}) {
  const router = useRouter();
  if (router.isFallback) {
    return <h1>Loading...</h1>;
  }

    //console.log(hotelPics.images)
    return (
        <div>
        {hotelPics.map((hotelpic)=> (
            hotelpic.images.map((image) => (
              //replace here with Image tag
              <p key={image.url}>{image.url}</p>
              )
            )
        ))}    
        </div>
    )

    
}

export async function getStaticProps() {
    const res= await fetch ('https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG')
    const hotelPics = await res.json()

return {
    props: {
        hotelPics,
    },
}

}

export default Images