So I had an odd request from a friend - They want a way to write Markdown files in the repo, and have those files generate new paths to article pages.

I have blog/[slug]/page.tsx as the structure of the article's page. The current workflow, is that anytime something is pushed to the repo, it rebuilds. The goal is for it to generate these static pages anytime a new article is added to the array of articles.

I made an object that has data about the article, including what to add at the bottom of the markdown content (about this author, etc.). I followed the NextJS guide on setting up mdx parsing (https://nextjs.org/docs/app/building-your-application/configuring/mdx) but now I need to import every file manually which what I was trying to do.

Each article has an object like so:

const WhyMigrateToRust = {
  title: "Test Text",
  slug: "test-text",
  author: {
    name: "Jon Smith",
    title: "CEO, Company",
    image: {
      data: JonSmithHeadshot, // imported from public folder
      alt: "Headshot of Jon",
    },
  };,
  previewImage: PlaceholderImage, // Preview image for search engines, and social media
  date: Date.parse("2024-10-16"),
  previewDescription:
    "... ... ... ...",
  content: <ArticlePageInMDX />,
};

then I add all articles to a single array:

const ArticleList: ArticleType[] = [ArticlePageInMDX ];
export default ArticleList;

Is something like this possible?

const ArticlePost = ({ params }: { params: { slug: string } }) => {
  const articlePost = ArticleList.find((article) => article.slug === params.slug);
  if (!articlePost) {
    notFound();
  }
  return (
    <main className="container h-[calc(100vh-324px)] min-h-fit flex flex-col flex-grow justify-center mx-auto text-center py-12">
      {articlePost.content}
      or
      <articlePost.content />
      <div className="text-center mb-8 flex flex-col gap-8">
        <AboutAuthor
          image={articlePost.author.image}
          title={articlePost.author.title}
          name={articlePost.author.name}
        />
      ||</div>
    </main>
  );
};

||