import matter from 'gray-matter'
import { marked } from 'marked'
import SearchBar from '../../components/SearchBar'
import fs from 'fs'
import path from 'path'

export default function title({frontmatter: {title, date},slug,content}) {
  return (
    <div className='DISPLAY_Container'>
      <SearchBar />
      <div className="DISPLAY_Sub_Container">
          <h3>{title}</h3>
          <p dangerouslySetInnerHTML={{ __html: marked.parse(content)}}></p>
      </div>

    </div>
  )
}

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

  const paths = files.map((filename) => ({
    params: {
      slug: filename.replace('.md', ''),
    },
  }))

  return {
    paths,
    fallback: false,
  }
}
export async function getStaticProps({ params: { slug } }) {

  const markdownWithMeta = fs.readFileSync(path.join('posts', slug + '.md'), 'utf-8')

  const { data:frontmatter,content } = matter(markdownWithMeta)

  return {
    props: {
      frontmatter,
      content,
      slug
    }
  }
}

The marked(content) function doesn't work that well, and when the page is reloaded the content disappears.

I am using .md files, and a npm package called marked as can be seen in code. The styling isn't that good either, i'd wanna use a better parser if possible and want that content not disappear when the page is reloaded.