クイックスタート

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 ファイルを作成しましょう。

content/docs/index.mdx

---
title: Hello World
---

## Yo what's up

開発モードでアプリを起動します。

npm run dev

http://localhost:5173/docs を開くと、ページを確認できます。

よくある質問

よくある疑問とその回答をまとめています。

ルーティングは React Router が処理します。まず、docs ルートを移動します (/docs/* -> /info/*) 。

app/routes.ts

import { route, type RouteConfig } from '@react-router/dev/routes';

export default [
  route('info/*', 'routes/docs.tsx'), 
  // ...
] satisfies RouteConfig;

最後に、source.ts でページのベース URL を更新します。

lib/source.ts

import { loader } from 'fumadocs-core/source';

export const source = loader({
  baseUrl: '/info', // 新しい値に変更
});

テンプレートでは、この値は lib/shared.ts 内で docsRoute として定義されています。Markdown のリンクにも反映されるよう、こちらで変更してください。

Vite には事前バンドルに関する不可解な問題があります (#3910) 。 Fumadocs を事前バンドルの対象から除外し、noExternal に追加してください。

vite.config.ts

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    // 必要に応じて Fumadocs の他の依存パッケージも追加します
    noExternal: ['fumadocs-core', 'fumadocs-ui', 'fumadocs-openapi', '@fumadocs/base-ui'],
  },
});