元件

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 留下回饋。

編寫內容

編寫文件前,建議先閱讀:

特殊需求