soy nuevo en nextjs, creé la página "Blog.js" (dentro de la carpeta "página") para obtener datos a través de api, cada vez que abro una página en el navegador, se muestran los datos, pero cada vez que llamo a esa página en index.js, aparece el siguiente error

 "TypeError: Cannot read property 'map' of undefined"

Aquí está mi código en "Data.js" (carpeta de página interior)

 import react from "react"; function Data(props) { console.warn("data",props); return <div className="abc"> { props.data.map(data=>( <div> <a>{data.title}</a> {props.title} </div> )) } </div> } Data.getInitialProps=async function() { const res= await fetch('https://jsonplaceholder.typicode.com/users') const data =await res.json(); return { data } } export default Data

Y después de la importación, estoy usando el siguiente código para usar "Datos", ¿Dónde estoy equivocado?

 <Data />