访问集合
导入方式
直接导入 MDX 文件作为组件使用
MDX 文件编译为 JavaScript 模块，包含多个导出：
- default：渲染组件
- frontmatter：来自 front matter 的元数据
- 来自 remark/rehype 插件的其他属性
作为组件使用
你可以直接导入 MDX 文件并使用 MDX 组件提供者渲染：
import MyPage from '@/content/page.mdx';
import { getMDXComponents } from '@/components/mdx';
export default function Page() {
return (
<div className="prose">
<MyPage components={getMDXComponents()} />
</div>
);
}作为 Next.js 页面
在 app 目录结构中用 page.mdx 替换 page.tsx：
---
title: My Page
---
export { default } from '@/components/layouts/page';
# Hello World
这是我的页面。必需配置
MDX 文件需要配置 MDX 组件提供者。分两步设置：
1. 创建 components/mdx.tsx
import defaultMdxComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
export function getMDXComponents(components?: MDXComponents) {
return {
...defaultMdxComponents,
...components,
} satisfies MDXComponents;
}
export const useMDXComponents = getMDXComponents;2. 更新 source.config.ts
import { defineConfig } from 'fumadocs-mdx/config';
export default defineConfig({
mdxOptions: {
providerImportSource: '@/components/mdx',
},
});框架兼容性
非 Next.js 的 React 框架（如 Tanstack Start）应将 MDX 文件作为页面内的组件使用，而非独立页面。