框架集成
Next.js
Fumadocs MDX 的 Next.js 集成指南
安装
npm i fumadocs-mdx fumadocs-core @types/mdx配置文件
source.config.ts
import { defineDocs, defineConfig } from 'fumadocs-mdx/config';
export const docs = defineDocs({
dir: 'content/docs',
});
export default defineConfig();next.config.mjs
import { createMDX } from 'fumadocs-mdx/next';
const config = {
reactStrictMode: true,
};
const withMDX = createMDX({
// 自定义配置文件路径
// configPath: "source.config.ts"
});
export default withMDX(config);注意：Fumadocs MDX 仅支持 ESM，推荐使用
.mjs作为 Next.js 配置文件扩展名。
TypeScript 路径别名
在 tsconfig.json 中添加路径映射：
{
"compilerOptions": {
"paths": {
"collections/*": [".source/*"]
}
}
}Fumadocs 集成
创建 lib/source.ts 建立连接：
import { docs } from 'collections/server';
import { loader } from 'fumadocs-core/source';
export const source = loader({
baseUrl: '/docs',
source: docs.toFumadocsSource(),
});
.source文件夹会在运行next dev或next build时自动生成。内容文件放在content/docs目录中。