'map function not working in ReactJs using nexttjs

I am new in ReactJS and i am using "Nextjs" framework,Right now i am using "async" function for fetching data but unable to fetch using "map" function, in console.log ...showing me following message " items: undefined }",Here is my code,Where i am wrong ?

import React, { Component } from 'react';
const blog =({items}) =>{
  console.log({items});
  return(
  <div>
   </div>
);
};


//calling api for get data
export const getstaticprops=async()=>{
console.log('Om Success');
    const res=await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await res.json()
    return {
      props: { items: posts },
    }
  
}
export default blog


Solution 1:[1]

test this code !

const blog =({posts}) =>{
  console.log(posts); \\ fix console log
  return(
  <div>

  </div>
);
};
export async function getServerSideProps(){
console.log('Om Success');
    const res = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await res.json()
    return {
      props: { posts }, \\ remove items
    }
  
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 H9ee