Props not getting rendered in nextjs?

Here my file index.js with my component : Blog :

import Head from 'next/head'
import Blog from './Blog'

export default function Home (props) {
  return (
    <div>
      <Head>
        <title> WebSite</title>
      </Head>

      <Blog />

    </div>
  )
}

here my blog file or I pass my props in the function (posts) and the function getStaticProps .

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import Head from 'next/head'
import Post from '../components/Post'
import React from 'react'

export default function Blog ({ posts }) {
  return (
    <div>
      <Head>
        <title>WebSite</title>
      </Head>

      <div className="posts">
        {posts.map((post , index) => (
          <Post post={ post } />
          ))}
      </div>

      <h2>Hello</h2>
    </div>
  )
}

export async function getStaticProps() {
  const files = fs.readdirSync(path.join('posts'))

  const posts = files.map(filename => {
    // Create slug
    const slug = filename.replace('.md', '')

    // Get frontmatter
    const markdownWithMeta = fs.readFileSync(
      path.join('posts',
      filename),
      'utf-8'
      )

      const {data:frontmatter} = matter(markdownWithMeta)
      return {
        slug,
        frontmatter,
      }
    })
    return {
      props: {
        posts: posts
    }
  }
}

I don't know why I can't get my posts back...This code works when I insert it in index.js but not when I want to create a component.