Fumadocs上のNext.jsドキュメント

Next.jsとFumadocsで構築するドキュメントサイト向けのレイアウト、ホームページ、SEOヘルパー。

ターミナル

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

はじめる

GitHub

最新リリース 0.1.27 2026-03-26 MIT Next.js 16, Node 20.9+

TSX

import { HomePage, CTASection } from "onedocs";

export default function Home() {
  return (
    <HomePage config={config} packageName="my-package">
      <CTASection
        title="Ready to get started?"
        cta={{ label: "Read the Docs", href: "/docs" }}
      />
    </HomePage>
  );
}

実践例

Onedocsは1つの設定オブジェクトをFumadocsのUIレイアウトに渡します。

1つの設定、1つのレイアウト

onedocs.config.tsにはサイトのタイトル、説明、GitHubリポジトリがあり、DocsLayoutはこれをFumadocsソースのページツリーとあわせて読み込みます。

レイアウトはサイドバー、テーマ切り替え、nav.githubから作られたGitHubリンク、検索ダイアログを描画します。検索ダイアログは、追加した/api/searchルートにクエリを送ります。

はじめにのガイドでは、コンテンツソース、Next.js設定、ルートレイアウト、ページルートといったその他のファイルを紹介します。

使い始める

設定

import { defineConfig } from "onedocs/config";

export default defineConfig({
  title: "My Docs",
  description: "Documentation for my project",
  nav: {
    github: "username/repo",
  },
});

ドキュメントのレイアウト

import { DocsLayout } from "onedocs";
import type { ReactNode } from "react";
import { source } from "@/lib/source";
import config from "../../../onedocs.config";

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout config={config} pageTree={source.pageTree}>
      {children}
    </DocsLayout>
  );
}

すぐ使えるレイアウト

DocsLayout、DocsPage、HomePageで、サイドバー、検索、目次を備えたドキュメント用の枠組みとランディングページを利用できます。

1つの設定ファイル

onedocs.config.tsにあるdefineConfig()で、タイトル、説明、ロゴ、ナビゲーションリンク、フッター、ホームページのヒーローと機能を設定します。

Markdown優先

コンテンツフォルダーに.mdまたは.mdxファイルを記述すると、すべてのページで構文強調表示と目次を利用できます。

検索

Fumadocsに組み込まれたOrama検索です。createFromSourceを使うAPIルートを1つ追加すると、検索ダイアログから利用できます。

ダークモード

ライトテーマとダークテーマはFumadocsのUIから利用でき、ドキュメントレイアウトにはテーマ切り替え機能が含まれています。ロゴとファビコンにはライト用とダーク用の画像を指定できます。

TypeScript対応

TypeScriptに対応し、型安全な設定とエディターでの自動補完を利用できます。

SEOとllms.txt

sitemap.xml、robots.txt、llms.txt、llms-full.txt、ページメタデータ、Open Graph画像用のヘルパー。

カスタマイズ可能

ドキュメントをさらに細かく制御したい場合は、Fumadocsのコンポーネントを直接使えます。

インストールや初回の使い方から、高度なワークフローやAPIの詳細まで、Onedocsのガイドをご覧ください。

ドキュメントを読む

ソースを表示