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 } } }

La función de marcado (contenido) no funciona tan bien, y cuando se recarga la página, el contenido desaparece.

Estoy usando archivos .md y un paquete npm llamado marked como se puede ver en el código. El estilo tampoco es tan bueno, me gustaría usar un mejor analizador si es posible y que el contenido no desaparezca cuando se recarga la página.