# Fumadocs (Framework Mode): はじめに
URL: /ja/docs
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/index.ja.mdx
React 向けのドキュメントフレームワーク
# Set up Fumadocs
Instructions for AI agents to set up Fumadocs on Next.js. The setup changes between versions, so run the commands below and read the linked docs instead of writing the setup from memory. Add `.md` to the URL of a docs page to read it as Markdown.
Use Next.js unless the user asks for another framework, or their app uses another one. In that case, follow the instructions of that framework instead:
- Next.js: https://fumadocs.dev/docs/next.md
- React Router: https://fumadocs.dev/docs/react-router.md
- TanStack Start: https://fumadocs.dev/docs/tanstack-start.md
- Waku: https://fumadocs.dev/docs/waku.md
- Astro: https://fumadocs.dev/docs/astro.md
## New Site
Create a new docs site in a new folder, or as a workspace package of a monorepo:
```bash
npx create-fumadocs-app@latest my-docs --template +next+fuma-docs-mdx --install --yes
```
For a static site, use the `+next+fuma-docs-mdx+static` template.
- `my-docs` is the folder to create.
- `--yes` skips the prompts, and the options you don't pass use their defaults. The options are listed in https://fumadocs.dev/docs/cli/create-fumadocs-app.md
## Existing App
To add docs to an existing app, run the CLI in the folder of the app:
```bash
npx @fumadocs/cli@latest init
```
- The CLI detects the framework, and adds the docs pages with their own layout beside the existing routes.
- `--i18n` sets up internationalization.
- The CLI asks before it overwrites a file. Without a terminal, it keeps the file and prints its name. Pass `--yes` only when every file it writes can be overwritten.
To set up by hand, or to merge a file that the CLI kept, follow https://fumadocs.dev/docs/next/manual-installation.md
## After the Setup
Both commands print the next steps. Start the dev server and open the docs, at `/docs` unless the output names another path.
For the tasks that follow, read the docs page of the task first:
- Writing pages: https://fumadocs.dev/docs/next/markdown.md
- Organizing pages and folders: https://fumadocs.dev/docs/next/page-conventions.md
- Customizing the UI: https://fumadocs.dev/docs/next/guides/customize-ui.md
- Changing the theme and colors: https://fumadocs.dev/docs/ui/theme.md
- Other tasks: https://fumadocs.dev/llms.txt lists every docs page.
Fumadocs (Foo-ma docs) は、高速かつ柔軟で、お使いの React フレームワークにシームレスに組み込めるよう設計された**ドキュメントフレームワーク**です。
複数のレイヤーで構成されています。
ドキュメント検索、コンテンツソースのアダプター、Markdown 拡張機能など、ロジックの大部分を担います。
Fumadocs のデフォルトテーマです。ドキュメントサイト向けの美しいデザインとインタラクティブなコンポーネントを提供します。
コンテンツの取得元です。CMS のほか、[Fumadocs MDX](/docs/mdx)(公式のコンテンツソース)のようなローカルデータレイヤーを利用できます。
UI コンポーネントのインストールや各種作業の自動化を行うコマンドラインツールです。レイアウトのカスタマイズに役立ちます。
詳しい紹介記事「[What is Fumadocs](/docs/next/what-is-fumadocs)」をご覧ください。
## フレームワークの選択 [#choosing-a-framework]
ガイドはフレームワークごとに用意されています。アプリで使用しているフレームワークを選択してください。新規プロジェクトの場合は Next.js をおすすめします。
高機能で成熟したフレームワークで、新規プロジェクトの標準的な選択肢です。
React Router アプリ向けです。SPA モードでは、サイトを CDN 上で静的にホスティングできます。
TanStack Start アプリ向けです。SPA モードでは、サイトを CDN 上で静的にホスティングできます。
高速かつシンプルな、サーバーコンポーネントに対応した Vite ベースの React フレームワークです。
Astro サイト向けです。コンテンツコレクションを利用でき、MDX を React アイランドとしてレンダリングします。
[Fumapress](https://press.fumadocs.dev) は、Fumadocs をベースに、より多くの機能を管理するサイトジェネレーターです。
* 自動ルーティング、`llms.txt`、MCP などの基本機能を備えています。
* Vite ([Waku](https://waku.gg)) をベースにしています。
独自の React フレームワークの使用が前提となりますが、その分より優れた DX を提供します。