I get the Image of each motorcylce by its articleId, then accessing to the image link in a new fetch request.

The code in my main page where I catch the articleID and send it as a prop to MotoImage Component.

import MotoImage from “@/components/MotoImage”;

async function getData() {
const url =“https://motorcycle-specs-database.p.rapidapi.com/make/Yamaha/model/yz125”;
const options = {
method: “GET”,
// headers: { “X-Api-Key”: “a141PyUM3f7JoY2ZTlY6kg==ZlAiGNVYjYlSD9IO” },
headers: {
“X-RapidAPI-Key”: “7f84114117msh60749b07331b46ep1a4c46jsn837104533757”,
“X-RapidAPI-Host”: “motorcycle-specs-database.p.rapidapi.com”,
},
};
try {
const response = await fetch(url, options);
const result = await response.json();
return result;
} catch (error) {
console.error(error);
}
}

async function HomePage() {
const data = await getData();
return (
<div className=“space-y-4”>
{data.slice(0, 3).map((item) => (
<div key={item.articleCompleteInfo.articleID}>
<h2>{item.articleCompleteInfo.makeName}</h2>
<p>{item.articleCompleteInfo.articleID}</p>
<MotoImage articleID={item.articleCompleteInfo.articleID} />
</div>
))}
</div>
);
}
export default HomePage;

MOTOIMAGE.JSX COMPONENT
import Image from “next/image”;

async function getImage(articleID) {
const url = https://motorcycle-specs-database.p.rapidapi.com/article/${articleID}/image/link;
const options = {
method: ‘GET’,
headers: {
‘X-RapidAPI-Key’: ‘7f84114117msh60749b07331b46ep1a4c46jsn837104533757’,
‘X-RapidAPI-Host’: ‘motorcycle-specs-database.p.rapidapi.com’
}
};

try {
const response = await fetch(url, options);
const result = await response.json();
return result;
} catch (error) {
console.error(error);
}
}

// Pass articleID as prop
async function MotoImage({ articleID }) {
//Call the getImage function passing articleID and saving the returned data in image
const image = await getImage(articleID)

return (
<Image
src={image.link}
alt="Moto Image"
width={248}
height={248}
/>
)
}

export default MotoImage