What is the recommended way to load MDX in NextJS's getStaticProps? (can't get it to work)

[joostdecock]

Hi 👋 . I am having a bit of a crisis of confidence, because I can't seem to figure out how to do what seems like it should be a straight-forward use-case 🙈

I suspect I'm missing something obvious and somebody here will be able to point out just what an idiot I am 🤞

Question

What is the recommended way to dynamically load MDX at build-time inside NextJS's 'getStaticProps` method? (aka: at build time)

Background

• I'm porting a Gatsby site to NextJs (12) and MDX (2).
• My markdown/mdx content is in a folder outside the site root, but in the same repo
• It's has (for each page) 5 different markdown files: en.md, es.md, nl.md. 'fr.md, and de.md` because -- you guessed it -- this is a multilingual site, so depending on the environment, I want to build a different language version
• The content inside those markdown (mdx) files is just the content. English files are the source material, the rest is auto-updated with Crowdin. Because these files are worked on by translators.

In Gatsby, I can load the files from disk at the build step, and programmatically create pages for them. Sweet.
In Next, I swear I can't seem to figure this one out. Here's a variety of roadblocks I've bumped into:

useStaticProps and the mdx react loader
I don't want to go and create a NextJS page for each and every markdown file out there. So I use a dynamic route with getStaticProps (and getStaticPaths).

The props one returns from there need to be something that can be serialized into JSON.
The MDX webpack loader returns a React component, so that doesn't work.

just import that stuff

Can't import because due to the language and the dynamic route, the path tot he file is dynamic.
I could use Next's dynamic imports, but it would do no good as I'd need to use this in getStaticProps to run at build-time and once again I end up with a React component that can't be serialized.

do the reading from disk myself and then compile them to something

There's so many do not do this warnings in the docs, that I sort of feel like I should not do this.

TL:DR

What is the recommended way to dynamically load MDX at build-time inside NextJS's 'getStaticProps` method?

The NextJS examples all assume that the MDX files are the pages of the NextJS site.
What about website that load a pile of documentation pages as MDX from some other location?

Thank you and forgive my ignorance.

[joostdecock]

To those who came here looking for answers, this page shows how it's done: https://mdxjs.com/guides/mdx-on-demand/

(thanks to @wooorm for pointing me in the right direction)