はじめに

Onedocsは、Next.jsとFumadocsで構築するドキュメントサイト向けのレイアウト、コンポーネント、ヘルパーのセットです。Markdownを記述し、1つの設定ファイルでサイトを定義すると、Onedocsがドキュメント用の枠組み、ホームページ、SEOルートを用意します。

既存のアプリケーションにドキュメントを追加する用途ではなく、独立したドキュメントサイト向けです。

Onedocsが追加するもの

Fumadocsに加えて、onedocsパッケージで次の機能を利用できます。

レイアウト - DocsLayoutとDocsPageは、サイドバー、検索、テーマ切り替え、目次を備えたFumadocsのUIドキュメントレイアウトを提供します。HomePageはヒーロー、インストールコマンド、機能、フッターを備えたランディングページを描画します。
1つの設定ファイル - onedocs.config.tsにタイトル、説明、ロゴ、ファビコン、ナビゲーションリンク、フッター、ホームページのコンテンツをまとめます。
MDXコンポーネント - mdxComponentsがコールアウト、タブ、カード、手順、アコーディオン、ファイルツリー、画像ズーム、型テーブルを登録するため、インポートせずにページで使えます。
CSSプリセット - 1つのインポートでTailwind CSS v4、FumadocsのUIテーマ、Onedocsのレイアウトスタイルを読み込みます。
SEOヘルパー - sitemap.xml、robots.txt、llms.txt、llms-full.txt、ページメタデータ、Open Graph画像を扱う関数です。

OnedocsにはNext.jsもFumadocsも同梱されていません。これらはピア依存関係のため、Onedocsと一緒にインストールする必要があります。

シェル

npm install onedocs fumadocs-core fumadocs-mdx fumadocs-ui lucide-react@0.562 next react react-dom

さらにTailwind CSS v4、Node.js 20.9以降、そして10個ほどの小さなファイルが必要です。具体的にはNext.jsとFumadocsのMDX設定、コンテンツソース、ルートレイアウト、ドキュメントレイアウト、ドキュメントページのルートです。はじめにでそれぞれを説明します。

項目	場所
サイトのタイトル、ロゴ、ナビゲーション、フッター	`onedocs.config.ts`。設定を参照
ホームページのヒーローと機能	`onedocs.config.ts`内の`homepage`。`src/app/page.tsx`内の`HomePage`が描画
ドキュメントのレイアウトとページ	`src/app/docs/layout.tsx`と`src/app/docs/[[...slug]]/page.tsx`。はじめにを参照
コンテンツフォルダーとサイドバーの順序	`source.config.ts`と`content/docs/meta.json`
MDXコンポーネント	`mdxComponents`。コンポーネントを参照
検索、サイトマップ、robots.txt、llms.txt	`src/app/`以下のルートファイル。SEOと検索を参照
メタデータとOpen Graph画像	`onedocs/metadata`と`onedocs/og`。APIリファレンスを参照