I can see my my api data from my terminal and it's also calling two time. I also want to display data in my page template. But I don't know where I am doing mistake and any data not showing in my template:
here is my code:
export default function Content({ blog }) {
return (
<>
{blog.map((blogs) => {
{
blogs.blog_title;
}
})}
</>
);
}
export async function getServerSideProps() {
// Fetch data from external API
const url = "http://127.0.0.1:8000/blog-api";
const headers = {
"Content-Type": "application/json",
Authorization: "<secret>",
};
const res = await fetch(url, { headers: headers });
const data = await res.json();
console.log(data);
// Pass data to the page via props
return {
props: {
blog: data,
},
};
}
You forgot to return the value from the .map method
export default function Content({ blog }) {
return (
<>
{blog.map((blogs) => <span key={blogs.id}>{blogs.blog_title}</span>)}
</>
);
}