Holy SKITTLES I just figured it out and it's the stupidest thing EVER.
The Solution? Don't NEST IT.
HOURS AND HOURS of reading documentation, watching videos and AGGRESSIVELY walking my dog(as in lot's of walks not aggressive walking) and this was the solution.
<pre>import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
export default function Home({data,done}) {
console.log('data :>> ', data);
console.log('done :>> ', done);
return (
<>
<div>
<main>
<h1> Available Campaigns</h1>
{data.map((element) => <div key={element.slug}>
<Image
src={"https://res.cloudinary.com/dplhfxphv/"+element.logo}
height= {120}
width = {120}
alt="Campaign Banner"
/>
<div>
<div>
<h1>{element.title}</h1>
<p>{element.description}</p>
<p>{element.created_at}</p>
</div>
<div>
<p>Lorem Test</p>
</div>
</div>
</div>)}
</main>
</div>
</>
)
}
export async function getStaticProps(){
const response = await fetch("http://127.0.0.1:1234/api/campaigns")
const data = await response.json()
return {
props:{
data:data,
done:true
}
}
}
I just renested it and it's working that way, too. WTF
PS the '120' can be either ' or {} they both work.
Also, the original formatting I used with the Image information mostly online works that way as well. The way in the solution is just CLEANER.
WTF, someone that knows Next comment and let me know what's going on. Crazy weird..