如何生成MDX文件

什么是MDX？

MDX 是一种结合了 Markdown 和 JSX 的语法格式，允许你在 Markdown 中直接嵌入 React 组件。它常用于构建文档站点、博客系统或任何需要富文本与交互组件结合的场景。

为什么使用MDX？

• 保留 Markdown 的简洁写法
• 支持在文档中使用 React 组件（如图表、按钮、交互式示例）
• 适用于静态站点生成器（如 Next.js、Gatsby、Docusaurus）

如何生成MDX文件

1. 手动创建：新建一个以 .mdx 为扩展名的文件，例如 example.mdx，然后像写 Markdown 一样编写内容，并可插入 JSX。

   {`# 欢迎使用 MDX
   
   这是一个普通段落。
   
   <MyComponent prop="value" />`}

2. 通过脚本转换：可以使用 Node.js 脚本将现有 Markdown 文件批量转换为 MDX（需手动添加组件标签）。
3. 使用工具生成：部分静态站点生成器（如 Next.js + @next/mdx）支持自动解析 .mdx 文件并渲染为页面。

在 Next.js 中启用 MDX 支持

安装依赖：

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

配置 next.config.js：

{`const withMDX = require('@next/mdx')()
module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
})`}

之后即可在 pages/ 目录下直接使用 .mdx 文件作为页面。

注意事项

• 确保你的构建工具支持 MDX 解析（如 Webpack、Vite 插件）
• 导入的 React 组件必须在 MDX 文件顶部声明（可通过 layout 或 provider 注入）
• 避免在 MDX 中使用未转义的 HTML 标签，可能引发安全或解析问题