next js empty render when i import data - next.js

Question

my problem is when i want to fetch data from data.json nothing display it give me many empty array when i try to console.log
screenshot:
screenshot and path of files
i tried hard to change the import path to back with ../ but nothing display to me im so wonder about this error and this is my first time i work with next js
import Image from 'next/image'
const EventPerCityPage = ({data}) => {
console.log("helloa"+data)
return (
<div>
<h1> event in london</h1>
<div>
{data.map((ev)=>{
<a key={ev.id} href={`/events/${ev.city}/${ev.id}`}>
<Image width={300} height={300} alt={ev.title} src={ev.image} />
<h2>{ev.title}</h2>
<p>{ev.description}</p>
</a>
})}
</div>
<p>hello</p>
</div>
)
}
export default EventPerCityPage;
export async function getStaticPaths (){
const {events_categories} = await import ('/data/data.json')
console.log(events_categories+"this code")
const allPaths = events_categories.map(ev=>{
return{
params: {
cat: ev.id.toString()
}
}
})
console.log(allPaths)
return{
paths: allPaths,
fallback:false
}
}
export async function getStaticProps(context){
const id = context?.params.cat
console.log("all path aaaaaaaa" +id)
const {allEvents} = await import('/data/data.json')
console.log(allEvents+"rrrrrrtttttttt")//
const data = allEvents.filter((ev) => ev.city===id)
console.log(data+"eeeeeeeeeezzzzzzz")
return{
props: {data}
}
}