MDX 是一种将 Markdown 与 JSX(React 组件)结合的文件格式,允许你在 Markdown 文档中直接嵌入可交互的 React 组件。它广泛用于静态网站生成器(如 Next.js、Gatsby、Docusaurus)中,特别适合技术文档、博客和组件库展示。
以下是一个简单的 MDX 文件内容:
{`# 欢迎使用 MDX
这是一个普通的段落。
<Button variant="primary">
点击我
</Button>
你也可以在行内使用 <Counter /> 组件。`}
要在项目中使用 MDX,通常需要配置构建工具(如 Webpack 或 Vite)并安装相关插件,例如 @mdx-js/loader 或 @next/mdx(Next.js 专用)。
MDX 非常适合以下用途: