MDX文件怎么用？

什么是MDX文件？

MDX 是一种结合了 Markdown 与 JSX（React 的语法扩展）的文件格式。它允许你在 Markdown 文档中直接嵌入可交互的 React 组件，非常适合用于文档站点、博客系统或组件库说明。

MDX文件能做什么？

• 在 Markdown 中使用 React 组件，如图表、按钮、代码演示等。
• 构建现代化的静态网站（如使用 Next.js、Gatsby、Docusaurus 等框架）。
• 提升技术文档的表现力和交互性。

如何创建和使用MDX文件？

1. 安装支持 MDX 的工具链，例如：

• @mdx-js/mdx 和 @mdx-js/react
• Next.js + @next/mdx 插件
• Gatsby + gatsby-plugin-mdx

2. 创建一个 .mdx 文件，例如 example.mdx：

{`# 欢迎使用 MDX

这是一个普通的 Markdown 段落。

<Counter /> `}

3. 在你的应用中导入并渲染该 MDX 文件即可。

注意事项

MDX 文件不能直接在浏览器中运行，必须通过构建工具（如 Webpack、Vite）或静态站点生成器进行编译处理。普通文本编辑器可以打开 .mdx 文件，但无法执行其中的组件逻辑。