Markdown is a plain text formatting syntax. Markdown lets you write plain text that can be converted to formatted HTML. MDX is an extension to Markdown which allows you to write JSX in your Markdown documents. This is why they call it Markdown for the component era. You could embed interactive alerts, dynamic charts, or media components for images and video in your Markdown..
JSX in Markdown
An example of JSX code that can be written in an MDX document.
<div style={{ padding: "1rem", backgroundColor: "tomato" }}>
Just a bit of text with a background color of `tomato`.
</div>
As processed from this MDX document.
Just a bit of text with a background color of tomato.
React Components
A React component that can be written to an MDX document.
As processed from this MDX document.
Photo credit: Avin CP aka @avincp on Upsplash
More Information:
More about using MDX in a Next.js project
This blog uses a Next.js MDX package: next-mdx-remote.
Here is an example from Next.js of a site made using mdx-remote.
Simple Example: Next.js project example using MDX.