MDX文件怎么用？完整使用指南

MDX 是一种将 Markdown 与 JSX（React 组件）结合的文件格式，广泛用于文档站点、博客系统和组件库说明中。它让你在写 Markdown 的同时，直接嵌入可交互的 React 组件。

1. MDX 文件的基本结构

一个典型的 MDX 文件既包含普通 Markdown 内容，也包含 JSX 元素：

# 欢迎使用 MDX

这是一个普通的段落。

<Button variant="primary">点击我</Button>

你还可以导入自定义组件：

import MyChart from './MyChart';

<MyChart data={data} />

2. 如何打开和编辑 MDX 文件

• 文本编辑器：任何支持 Markdown 高亮的编辑器（如 VS Code、Sublime Text）都可以打开 .mdx 文件。
• 开发环境：通常配合 React 项目使用，需通过构建工具（如 Webpack、Vite）配合 @mdx-js/loader 或 @mdx-js/rollup 插件处理。
• 预览工具：部分静态站点生成器（如 Next.js + MDX 插件、Docusaurus、Gatsby）可直接渲染 MDX 页面。

3. 在 React 项目中使用 MDX

以 Next.js 为例，安装依赖：

npm install @next/mdx @mdx-js/react

配置 next.config.js 后，即可将 .mdx 文件当作 React 组件导入使用。

4. 适用场景

• 技术文档网站（如组件库文档）
• 支持交互式内容的博客
• 教学平台中的动态示例

5. 注意事项

MDX 不是纯 Markdown，不能被所有 Markdown 解析器识别。必须在支持 MDX 的环境中运行，否则 JSX 部分会报错或被忽略。