Next.js markdown-blog page code not working

Question

import { Blogs } from "../../components/Data"
import Image from "next/image";
import Link from "next/link";
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'

export default function index({ posts }) {
    // const Short_Blog = Blogs.map(item =>
    //     <div className="BLOGS_Projects" key={item}>
    //         <div className="BLOGS_Projects_Image">
    //             <Image
    //                 className='BLOGS_Projects_image'
    //                 src={item['img-1']}
    //                 layout='fill'
    //             // objectFit='contain'
    //             />
    //         </div>
    //         {/* if someone clicks on this link i want them to go to [project].js and send This item to [projcet].js */}
    //         <Link href={'/blogs/' + Blogs.indexOf(item)}>
    //             <a>{item['title']}</a>
    //         </Link>
    //         <p>{item['desc']}</p>
    //     </div>
    // );

    return (
        <div className="BLOGS_Container">
            <div className="BLOGS_Sub_Container">

                <div className="BLOGS_New">

                    <h1 style={{ marginLeft: 25 + 'px' }}>Cyber-Security Blogs</h1>

                    <div className="BLOGS_Present">

                        {posts.map( post =>{
                            <h1 style={{zIndex: '10000'}}>{post}</h1>
                        })}

                    </div>

                </div>

            </div>
        </div>
    )
}

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

    const posts = files.map((filename) => {
        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,
        },
    }
}

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.

Answer 1

You need to return the element to render inside the callback of map function.

1st way

{posts.map((post) => {
  return <h1 style={{ zIndex: "10000" }}>{post}</h1>;
})}

2nd way

{posts.map((post) => (
  <h1 style={{ zIndex: "10000" }}>{post}</h1>
))}

Answer 2

React will not render plain html content as a string. You need to use the dangerouslySetInnerHTML prop, like so:

{
  posts.map((post) => {
    return <div dangerouslySetInnerHTML={{__html: post}}></div>
  })
}

You can read more about it here:

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Alternatively you can use something like next-mdx-remote, which you can learn about here:

https://github.com/hashicorp/next-mdx-remote