Is using require in a SSG generated component a good idea?

[ryyppy]

I am currently using require("some/blog/post") within the body of a SSG (getStaticProps) rendered component like this:

// pages/blog/[slug].js
function Page(props) {
  const router = useRouter();
  const { slug } = router.query;

  // Trying to simulate what I would usually get from creating a concrete file in `pages/blog/my-post.mdx`
  const { default: Component } = require(`../../_blogposts/${slug}.mdx`);
  const frontmatter = Component.frontmatter;

  return <Component frontmatter={frontmatter}/>;
}

// I am leaving out getStaticProps / getStaticPaths since it's not relevant for the question

The reason for that is that I want to be able to use the same existing mdx webpack loader pipeline in my dynamic path component.

In the official NextJS blog-starter example, the html was directly generated in the getStaticProps and then passed as a string prop. I'd like to avoid that, since I rely on the component injection model of MDX, and as far as I know, passing more complex data structures like MDX component trees as props will not work.

Anyways, the approach with require as outlined above seems to work.

My general question would be if there are any obvious downsides doing that?
The only downside I saw so far is that I had to overload the fs module, since I was using fs functionality in the getStaticPaths function.

Any feedback on how to approach this kind of problem would be helpful!