http://127.0.0.1:8000/api/campaigns and when I visit the url I see the data.
The problem is when I fetch and console the data with Next.js, I get undefined. Also when I try mapping the data, I get the error:
Unhandled Runtime Error
Error: Cannot read properties of undefined (reading 'map')
Here is my Index.js file where the data fetching is done:
import React from 'react'
export default function Index ({data}) {
console.log(data)
return (
Available Campaigns
{data.map((element) =>
)}
);
}
export async function getStaticProps() {
const response = await fetch("
http://127.0.0.1:8000/api/campaigns");
const data = await response.json();
return {
props: {
data: data
},
}
}
Here is a screenshot of the data I am getting when I visit the URL:
Here is the file structure for the Next.js app inside the front end:
Also, note that I am using the latest version of Next.js. Any help will be highly appreciated. Thanks.
