Being completely new to Next.js and Strapi, I've been grappling with this issue for the past couple of days.
While my index pages are successfully fetching data from my Strapi V4 API backend, my detail pages/[slug].js keep throwing the error 'events.map is not a function', along with other errors when attempting workarounds.
Here's the code snippet for my [slug].js
export default function EventPage({ evt }) {
return (
<Layout>
<div className={classes.container}>
<GridContainer>
<GridItem xs={12} sm={12} md={6} lg={6} >
<Card blog>
<CardHeader image>
<a href="#">
<img key={evt.id}
src={evt.image.formats.medium.url
? evt.attributes.image.data.attributes.formats.medium.url
: '/img/image.webp'}
alt="..."
/>
</a>
</CardHeader>
<CardBody>
<Info>
<h6 className={classes.cardCategory}>{ evt.name }</h6>
</Info>
<div className={classes.cardDescription}>
{ evt.description }
</div>
</CardBody>
</Card>
</GridItem>
</GridContainer>
</div>
</Layout>
)
}
export async function getStaticPaths() {
const res = await fetch(`${API_URL}events`)
const events = await res.json()
const paths = events.map((evt) => ({
params: { slug: evt.slug },
}))
return {
paths,
fallback: true,
}
}
export async function getStaticProps({ params: { slug } }) {
const res = await fetch(`${API_URL}events?slug=${slug}`)
const events = await res.json()
return {
props: {
evt: events[0],
},
revalidate: 1,
}
}
I understand everyone is just as occupied as I am, so any assistance would be greatly appreciated.