组件

Fumadocs 123 入门

John Doe
2025年7月20日
技术
教程

引言

Fumadocs (Foo-ma docs) 是基于 Next.js 的 文档框架,设计目标是快速、灵活,并能自然地接入 Next.js App Router。

Fumadocs 由几个部分组成:

Fumadocs Core

负责大部分逻辑,包括文档搜索、内容源适配器和 Markdown 扩展。

Fumadocs UI

Fumadocs 的默认主题,为文档站和交互组件提供清晰的外观。

Content Source

内容来源可以是 CMS,也可以是本地数据层,例如 Fumadocs MDX(官方内容源)。

Fumadocs CLI

用于安装 UI 组件和自动化操作的命令行工具,方便自定义布局。

想了解更多?

阅读更详细的 什么是 Fumadocs 介绍。

术语

Markdown/MDX: Markdown 是用于编写格式化文本的标记语言。Fumadocs 开箱支持 Markdown 和 MDX(Markdown 的超集)。

虽然不是必需,但了解 Next.js App Router 的基础知识,有助于进一步自定义。

自动安装

需要 Node.js 18 或更高版本。注意 Node.js 23.1 可能与 Next.js 生产构建存在问题。

npm create fumadocs-app

它会询问:

  • 要使用的 React.js 框架(文档目前只针对 Next.js 编写)。
  • 要使用的内容源。

新的 Fumadocs 应用会完成初始化。接下来就可以开始开发了。

已有代码库?

可以按照 手动安装 指南开始。

开始使用

在 docs 文件夹中创建第一个 MDX 文件。

content/docs/index.mdx
---
title: Hello World
---

## Yo what's up

以开发模式运行应用,并打开 http://localhost:3000/docs。

npm run dev

常见问题

下面是一些常见问题。

升级 Fumadocs

遇到问题或想试用新功能时,请先升级 Fumadocs:

pnpm
pnpm update -i -r --latest

了解更多

刚开始使用也不用担心,欢迎提问。

如果有不清楚的地方,请在 Github Discussion 留下反馈。

编写内容

编写文档前,建议先阅读:

特殊需求