コンポーネント

はじめに

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 コンポーネントの導入や作業の自動化に使うコマンドラインツールです。レイアウトのカスタマイズに役立ちます。

もっと知る

詳しい説明は What is Fumadocs を読んでください。

用語

Markdown/MDX: Markdown は、整形された文章を書くためのマークアップ言語です。Fumadocs は Markdown と、その上位互換である MDX に最初から対応しています。

必須ではありませんが、さらにカスタマイズするときは Next.js App Router の基礎を知っていると役立ちます。

自動インストール

Node.js 18 以上が必要です。Node.js 23.1 では、Next.js の本番ビルドに問題が出ることがあります。

npm create fumadocs-app

次の点を尋ねられます。

使う React.js フレームワーク（ドキュメントは Next.js 向けにのみ書かれています）。
使うコンテンツソース。

新しい fumadocs アプリが初期化されます。ここから改造を始められます。

既存のコードベースから始める場合

始めるには Manual Installation の手順に従ってください。

使ってみる

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 でフィードバックを送ってください。

コンテンツを書く

ドキュメントを書く前に、次を読んでください。

Markdown

Fumadocs には、コンテンツ作成のための追加機能があります。

ルーティング

コンテンツの整理方法です。