[开源]Fumadocs 为 React 开发者而生的开源文档框架

🚀 1. 项目简介

Fumadocs 是一个面向开发者的 React.js 文档框架，由 Fuma Nama 精心设计。它为您的文档工作流程带来强大的功能，并具有高度可定制性以满足您的偏好，可与任何 React.js 框架、CMS 等无缝集成。

⚖️ 2. 开源协议

采用MIT开源协议

🔑 3. 核心特性

Fumadocs 是一个设计快速、灵活，并且可以无缝地集成到您的 React 框架中的文档框架。

Fumadocs 由不同的部分组成：

• • Fumadocs Core：处理大部分逻辑，包括文档搜索、内容源适配器和 Markdown 扩展。
• • Fumadocs UI：Fumadocs 的默认主题为文档网站和交互式组件提供了美观的外观。
• • Content Source：您的内容来源可以是 CMS 或本地数据层，例如 Fumadocs MDX （官方内容来源）。
• • Fumadocs CLI：一个用于安装 UI 组件和自动化操作的命令行工具，可用于自定义布局。

Fumadocs 的设计深受 Nextra 的影响，例如路由约定。这就是原因。 Fumadocs 中也存在 meta.json 。

Fumadocs 支持以下特性：静态生成、缓存、浅色/深色模式、语法高亮、目录、全文检索、国际化、最后 Git 编辑时间、页面图标、RSC、远程源、SEO、内置组件、RTL布局。还包括以下附加功能，如OpenAPI 集成、TypeScript 文档生成、TypeScript Twoslash等。

📸 4. 项目概览

📦 5. 安装及使用

在 Next.js 上设置 Fumadocs：

先决条件：

• • Next.js 16. Next.js 16。
• • Tailwind CSS 4. Tailwind CSS 4。

pnpm add fumadocs-mdx fumadocs-core @types/mdx

创建配置文件：

import { defineDocs, defineConfig } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  dir: 'content/docs',
});

export default defineConfig();

将插件添加到 Next.js 配置中：

import { createMDX } from 'fumadocs-mdx/next';

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
};

const withMDX = createMDX({
  // customise the config file path
  // configPath: "source.config.ts"
});

export default withMDX(config);

Fumadocs MDX 仅支持 ESM，建议使用 next.config.mjs 进行精确的 ESM 解析。

设置导入别名（推荐）：

{
  "compilerOptions": {
    "paths": {
      "fumadocs-mdx:collections/*": [".source/*"]
    }
  }
}

您可以创建一个 lib/source.ts 文件，并从 docs 集合输出中获取 Fumadocs 源代码。

import { docs } from 'fumadocs-mdx:collections/server';
import { loader } from 'fumadocs-core/source';

export const source = loader({
  baseUrl: '/docs',
  source: docs.toFumadocsSource(),
});

当您运行 next dev 或 next build 时，将会生成 .source 文件夹。

您现在可以在 content/docs 文件夹中编写内容。

🌐 6. 项目开源地址

Github开源地址：https://github.com/fuma-nama/fumadocs 在线文档地址： https://www.fumadocs.dev/

✅ 7. 总结

在第一次打开Fumadocs官网首页时，就被它的介绍吸引到了。相比之前使用过的Docusaurus文档框架，感觉Fumadocs在界面和设计方面更胜一筹。Fumadocs的详细介绍如下：深受Unkey、Vercel、Orama等初创公司团队和开发人员的喜爱，每天都在不断发展，力求成为用户最喜欢的文档框架。具有极简美学设计，支持高度定制化。提供设计精良的主题，并支持无头模式，方便用户插入自定义用户界面。对于专业设计师，可以使用Fumadocs CLI进行主题定制。原生支持Markdown和MDX格式，为非开发人员、开发人员和AI代理提供直观、便捷和广泛的语法支持。Fumadocs旨在与任何内容源集成，适用于MDX、内容集合以及用户自己的CMS系统。完全由热情的开源社区驱动。