What is MDX?
Markdown extended with JSX syntax. Lets you embed React components inside markdown content, ideal for blog posts that need interactive elements.
MDX is a syntax that combines Markdown's readability with JSX's component composition. An MDX file is mostly plain Markdown (headings, lists, links) but can import and render React components inline: `<CodeDemo />`, `<Callout type="warn">...</Callout>`. This is ideal for documentation, blog posts with interactive demos, and any content where a static-text-only constraint feels limiting. In Next.js App Router, MDX files at `app/blog/post.mdx` are compiled to React Server Components at build time. Custom components are provided via the `mdx-components.tsx` file at the project root. Two main libraries: `@next/mdx` (Next-native, simpler) and `next-mdx-remote` (allows remote content + dynamic compile). For static content authored in the repo, use `@next/mdx`; for content from a CMS or database, use `next-mdx-remote`.