如何生成MDX文件

MDX 是一种将 Markdown 与 JSX（React 组件）无缝结合的文件格式，广泛用于文档站点、博客系统和静态内容管理平台（如 Next.js、Gatsby、Docusaurus 等）。本文将带你从零开始了解并生成自己的 MDX 文件。

什么是 MDX？

MDX 允许你在 Markdown 中直接嵌入 React 组件。例如：

{`# 欢迎使用 MDX

这是一个普通的段落。

<Counter />

你可以在 Markdown 中使用交互式组件！`}

生成 MDX 文件的步骤

1. 创建 .mdx 文件

只需新建一个扩展名为 .mdx 的文本文件，例如 example.mdx，即可开始编写内容。

2. 编写 Markdown + JSX

在文件中自由混合 Markdown 语法和 JSX 组件：

{`import { Alert } from './components/Alert'

# 使用自定义组件

<Alert type="info">
  这是一个信息提示框！
</Alert>

## 更多内容
普通 Markdown 依然有效。`}

3. 在项目中使用（以 Next.js 为例）

安装支持包：

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

配置 next.config.js：

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

之后即可将 .mdx 文件作为页面或内容模块使用。

常用工具推荐

• @mdx-js/mdx：官方解析器，可将 MDX 转为 JSX 字符串
• Next.js + @next/mdx：开箱即用的 MDX 支持
• Docusaurus：专为技术文档设计，原生支持 MDX
• Vite + vite-plugin-mdx：轻量级现代构建方案

注意事项

确保你的构建环境支持 JSX 解析；纯 Markdown 编辑器可能无法正确渲染 MDX 中的组件代码，建议在开发环境中预览效果。