クイックスタート
Fumadocs を使ってみる
Using an AI agent?
Copy the instructions into your agent (Claude Code, Cursor, Codex, etc.) to set up a new docs site, or to add Fumadocs to an existing app. For other tasks, give it fumadocs.dev/llms.txt, which lists every docs page as Markdown.
用語
Markdown/MDX: Markdown は、書式付きテキストを作成するためのマークアップ言語です。Fumadocs は Markdown と MDX(Markdown のスーパーセット)をネイティブにサポートしています。
Bun: JavaScript ランタイムです。本ガイドではスクリプトの実行に使用します。Node.js を使いたい場合は、代わりに unrun をお試しください。
より詳細なカスタマイズを行うには、React.js の基本的な知識があると役立ちます。
自動インストール
Node.js 22 以上が必要です。
npm create fumadocs-app使用する組み込みテンプレートについて、次の項目を選択するよう求められます。
- フレームワーク: Next.js、React Router、TanStack Start、Waku、Astro
- コンテンツソース: Fumadocs MDX、または Astro のコンテンツコレクション
新しい Fumadocs アプリが初期化され、以下の機能がデフォルトで設定されます。
既存のコードベースに導入する場合
手動インストールガイドに従って導入できます。
さあ、始めましょう!
docs フォルダーに最初の MDX ファイルを作成しましょう。
---
title: Hello World
---
## Yo what's up開発モードでアプリを起動します。
npm run devhttp://localhost:3000/docs を開くと、ページを確認できます。
よくある質問
よくある疑問とその回答をまとめています。
お探しのAPIや修正は、新しいバージョンで提供されている可能性があります。Fumadocsをアップグレードしてから、もう一度お試しください。
ルーティングは Next.js が処理します。まず、docs ルートを移動します (/docs/* -> /info/*) 。
ルートの名前を変更します。
または、ルートグループを使用して /docs/* を /* に変更することもできます。
最後に、source.ts でページのベース URL を更新します。
import { loader } from 'fumadocs-core/source';
export const source = loader({
baseUrl: '/info', // 新しい値に変更
});テンプレートでは、この値は lib/shared.ts 内で docsRoute として定義されています。Markdown のリンクにも反映されるよう、こちらで変更してください。
レイアウトタブの使用をおすすめします。
Next.js App Router でレイアウトを管理する場合と同様に、まずコンテンツディレクトリ (/content/docs) から元の MDX ファイルを削除します。
これにより、ページの重複によるエラーを防げます。
次に、Docs レイアウトの配下にない別のルートグループにページを追加します。
たとえば、/docs/test を置き換える場合は次のようになります。
/docs を置き換える場合は、catch-all ルートを省略不可の形式に変更する必要があります。
次のような Turbopack のエラーが発生する場合:
JSON file not found: FileSystemPath { ... path: "lib/locales/sources/file.json.json" }多くの場合、require(esm) がサポートされていないことが原因です (#3312) 。Node.js 22 以上にアップグレードしてください。
Node.js 23.1 で、本番ビルド時に次のエラーが発生する場合:
Could not find a production build in the '.next' directory.これは既知の問題です (#1021 を参照) 。Node.js を 23.6.0 以上にアップグレードすると解決できます。
Next.js では、generateStaticParams が設定されていると、動的ルートが静的ルートに変換されます。
そのため、静的ページと同等の速度で動作します。
静的エクスポートを有効にすると、静的なビルド出力を得ることもできます。
さらに詳しく
初めての方もご安心ください。ご質問はいつでも歓迎しています。
わかりにくい点があれば、Github Discussion でフィードバックをお寄せください!
コンテンツの執筆
ドキュメントを執筆する際は、以下を必ずお読みください。
Markdown
Fumadocs には、コンテンツ執筆に役立つ追加機能が用意されています。
ナビゲーション
ナビゲーション構造をカスタマイズする方法を説明します。
ページスラッグとページツリー
コンテンツを整理する方法を説明します。
コンポーネント
ドキュメントの充実に使える、利用可能なコンポーネントの一覧です
特殊な要件
How is this guide?
最終更新日
