Using MDX

MDX to markdown is the same as JSX to JS. To quote the original site,

MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast 🚀.

... and this one:

Writing is fun again when you combine components, that can even be dynamic or load data, with the simplicity of Markdown for long-form content.

Basically, renaming your .md file to .mdx gives you ability to import and use React components as if it was a normal React or Next.js app.

Here is a small demo video for curious:

Say we have a basic React counter component like this:

components/example-counter.jsx
1import React, { useState } from 'react'
2
3export default function Counter() {
4  const [count, setCount] = useState(0)
5
6  return (
7    <div style={{ border: '1px solid purple', padding: '1rem' }}>
8      <p>You clicked {count} times</p>
9      <button onClick={() => setCount(count + 1)}>Click me</button>
10    </div>
11  )
12}

We then include it in our .mdx file and display it just like in React application:

#todo

Voila! This way you can create dynamic components for your documentation like never before. Live code editors, quizes, exams, cheatsheets, comments, you name it. Possibilities are endless.

For more information what can be achieved with MDX, see the official site.