title: Next.js markdown-blog page code not working
body: <pre><code>import { Blogs } from &quot;../../components/Data&quot;
  import Image from &quot;next/image&quot;;
  import Link from &quot;next/link&quot;;
  import fs from 'fs'
  import path from 'path'
  import matter from 'gray-matter'
  
  export default function index({ posts }) {
      // const Short_Blog = Blogs.map(item =&gt;
      //     &lt;div className=&quot;BLOGS_Projects&quot; key={item}&gt;
      //         &lt;div className=&quot;BLOGS_Projects_Image&quot;&gt;
      //             &lt;Image
      //                 className='BLOGS_Projects_image'
      //                 src={item['img-1']}
      //                 layout='fill'
      //             // objectFit='contain'
      //             /&gt;
      //         &lt;/div&gt;
      //         {/* if someone clicks on this link i want them to go to [project].js and send This item to [projcet].js */}
      //         &lt;Link href={'/blogs/' + Blogs.indexOf(item)}&gt;
      //             &lt;a&gt;{item['title']}&lt;/a&gt;
      //         &lt;/Link&gt;
      //         &lt;p&gt;{item['desc']}&lt;/p&gt;
      //     &lt;/div&gt;
      // );
  
      return (
          &lt;div className=&quot;BLOGS_Container&quot;&gt;
              &lt;div className=&quot;BLOGS_Sub_Container&quot;&gt;
  
                  &lt;div className=&quot;BLOGS_New&quot;&gt;
  
                      &lt;h1 style={{ marginLeft: 25 + 'px' }}&gt;Cyber-Security Blogs&lt;/h1&gt;
  
                      &lt;div className=&quot;BLOGS_Present&quot;&gt;
  
                          {posts.map( post =&gt;{
                              &lt;h1 style={{zIndex: '10000'}}&gt;{post}&lt;/h1&gt;
                          })}
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export async function getStaticProps() {
      const files = fs.readdirSync(path.join('posts'))
  
      const posts = files.map((filename) =&gt; {
          const slug = filename.replace('.md', '')
  
          const markdownWithMeta = fs.readFileSync(path.join('posts', filename), 'utf-8')
  
          const { data: frontmatter } = matter(markdownWithMeta)
  
          return {
              slug,
              frontmatter
          }
      })
  
      return {
          props: {
              posts,
          },
      }
  }
  </code></pre>
  <p>The posts object does exist but when I try to use it in the HTML, it doesn't show up anyone got any idea why this is happening?
  the posts.map that I used is not giving any errors but it also doesn't show any h1 html in actual page, the actual page seems blank.</p>
  <p><a href="https://i.stack.imgur.com/9fi8L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9fi8L.png" alt="enter image description here" /></a></p>