Get all posts components props in NextJS - reactjs

Question

I'm moving my blog from Jekyll to NextJS and missing a feature to return all posts in one list.
From the official examples and other sources, I see that posts are written in markdown, and developers need to read a directory with posts, parse files, extract front matter, etc.
But I heavily use schema.org attributes, and all posts are written in pure HTML, I only replaced img elements with NextJS implementation.
So instead of using frontmatter, I renamed my posts' file extension to .js and rewrote its contents to this:
import Breadcrumbs from '/components/breadcrumbs';
import PostHeader from '/components/postheader';
export async function getStaticProps() {
return {
props: {
title: "How to start investing",
description: "How to start investing in 2022",
published: "2021-08-01",
modified: "2022-04-09",
tags: ["investing", "how-to"]
}
}
}
export default function Post() {
return <>
<Breadcrumbs />
<article itemscope itemtype="https://schema.org/TechArticle">
<PostHeader />
<div>
blah.. blah.. blah..
</div>
</article>
</>
}
So is there a way to get Component props by given folder path or something like that without parsing files?

Answer 1

import PropTypes from 'prop-types';
export default function Post(props) {
return <>
<Breadcrumbs />
<article itemscope itemtype="https://schema.org/TechArticle">
<PostHeader />
<div>
<p>{props.title}</p>
<p>{props.description}</p>
<p>{props.published}</p>
<p>{props.modified}</p>
<p>{props.tags}</p>
</div>
</article>
</>
}
ComponentName.prototype ={
title: String,
description:string,
published: VarDate,
modified: VarDate,
tags:String
}

Answer 2

I ended up storing all posts in a simple javascript list
export default ([
{
title: "How to start investing",
description: "How to start investing in 2022",
published: "2021-08-01",
modified: "2022-10-23",
tags: ["investing", "how-to"],
slug: "how-to-start-investing",
img: "startinvesting",
excerpt: `
Post excertp text...
`
},
{...}
])
and then importing it in GetStaticProps, filtering by post slug
import Image from 'next/image'
import posts from '../../../data/posts'
import Breadcrumbs from '../../../components/breadcrumbs'
import PostHeader from '../../../components/post-header'
export async function getStaticProps() {
return {
props: {
...posts.find(post => post.slug == 'how-to-start-investing')
}
}
}
export default function Post(props) {
return <>
<h1>{props.title}</h1>
Post text...
</>
}