Learn how to use MXD (Markdown + JSX + HTML) with Next.js (using TypeScript)

[Vadorequest]

I've made a simple POC about bringing the power of MDX inside a Next.js application.

POC:

• See live demo
  • Only this page uses MDX, other pages use TSX
• See PR

It's really exciting to be able to combine this as a 3-in-1 file. MDX really brings something new by allowing to combine JSX (react components) with well-known markdown/HTML.

This POC alone should help you get up to speed if you're interested with MDX.

---

But my end goal is to see if we can use MDX from a CMS, and build pages using content (MDX) from an external system, like a CMS. (If possible, then I plan to make a POC, using Airtable at first)

You can see my motivations and discuss this advanced use-case in this RFC

This could lead to a very advanced level of customisation, for an end-user point of view (content manager, writer, etc.), using a panel of pre-made React components as simply as writing HTML.

---

Related:

• Import MDX components dynamically #12151
• How to render MDX string as a react component? #13901
• How to handle the following? mdx-js/mdx#126
• The official MDX doc seem to use a virtual file (need to dig in, may be the solution): https://mdxjs.com/advanced/api#compiler

[revskill10]

Yes, it's possible. It's what i'm doing at https://mdxblog.now.sh . You can see a pingpong game rendered at https://mdxblog.now.sh/posts/New-post , which is a MDX file with <PingPong /> component.

[revskill10]

The goal is ambitous, it's even more interesting if you can integrate "smart" HOC for user to actually fetch and render data the way they want with renderProps pattern.

[Vadorequest]

Would you have an example about how to load MDX from a variable, instead of a file? (basically avoid using import/require)

Workflow I can see for now would be:

1. Load MDX content from CMS (API)
2. Make MDX content available to Next.js pages (e.g: pageProps.posts)
3. Page PostsContainer uses posts and render its children by compiling MDX

Seems simple enough, assuming MDX can be used that way on-the-fly, I haven't seen any example of that, yet.

Using MDXProvider, it'll then be possible to replace MDX elements by our own custom components

[Vadorequest]

I found the official example that uses the API uses a virtual file.

https://mdxjs.com/advanced/api#compiler

[alamenai]

live demo is not found.