How to fetch data server-side in the latest Next.js? Tried getStaticProps but it's not running and getting undefined

I am working on a Django Rest Framework with Next.js, and I am getting stuck with fetching data from the API. I have data in this url
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.