AI マジック 3Docsクイックスタート
Fumadocs を始める
はじめに
Fumadocs (Foo-ma docs) は、Next.js に基づいた ** ドキュメント フレームワーク ** であり、高速、柔軟、 Next.js App Router にシームレスに組み込まれます。
Fumadocs にはさまざまな部分があります。
Fumadocs Core
ドキュメント検索、コンテンツ ソース アダプター、Markdown 拡張機能など、ほとんどのロジックを処理します。
Fumadocs UI
Fumadocs のデフォルトのテーマは、ドキュメント サイトとインタラクティブ コンポーネントに美しい外観を提供します。
Content Source
コンテンツのソースは、CMS または Content Collections や公式コンテンツ ソースである Fumadocs MDX などのローカル データ レイヤーにすることができます。
Fumadocs CLI
UI コンポーネントをインストールして自動化するためのコマンド ライン ツール。レイアウトのカスタマイズに役立ちます。
Want to learn more?
Read our in-depth What is Fumadocs introduction.
用語
Markdown/MDX: Markdown は、書式設定されたテキストを作成するためのマークアップ言語です。 Fumadocs は、すぐに使える Markdown と MDX (Markdown のスーパーセット) をサポートしています。
必須ではありませんが、Next.js App Router の基本的な知識は、さらにカスタマイズする場合に役立ちます。
自動インストール
Node.js 18 の最小バージョンが必要です。Node.js 23.1 では Next.js 運用ビルドで問題が発生する可能性があることに注意してください。
npm create fumadocs-apppnpm create fumadocs-appyarn create fumadocs-appbun create fumadocs-app使用するフレームワークとコンテンツ ソースを尋ねられます。新しい fumadocs アプリを初期化する必要があります。これでハッキングを開始できます。
From Existing Codebase?
手動インストール] ガイドに従って開始してください。
お楽しみください!
最初の MDX ファイルを docs フォルダーに作成します。
---
title: Hello World
---
## Yo what's up開発モードでアプリを実行し、http://localhost:3000/docs. を確認します。
npm run dev探索する
プロジェクトでは、以下を確認できます。
lib/source.ts: コンテンツ ソース アダプターのコードloader()は、コンテンツ ソースと対話するためのインターフェイスを提供し、ページに URL を割り当てます。app/layout.config.tsx: レイアウトの共有オプション。オプションですが、保持しておくことをお勧めします。
| ルート | 説明 |
|---|---|
app/(home) | ランディング ページおよびその他のページのルート グループ。 |
app/docs | ドキュメントのレイアウトとページ。 |
app/api/search/route.ts | 検索用のルート ハンドラー。 |
コンテンツの執筆
ドキュメントを作成する場合は、必ずお読みください。
Markdown
Fumadocs has some additional features for authoring content too.
Navigation
Learn how to customise navigation links/sidebar items.
コンテンツ ソース
コンテンツ ソースは、Markdown ファイルのコンパイルやフロントマターの検証など、すべてのコンテンツを処理します。
はじめに] を読んで、コンテンツがどのように処理されるかを確認してください。
source.config.ts 設定ファイルが含まれており、frontmatter スキーマなどのさまざまなオプションをカスタマイズできます。
Fumadocs は Markdown 専用ではありません。 Sanity などの他のソースの場合は、カスタム コンテンツ ソース.
UIのカスタマイズ
カスタマイズガイド]を参照してください。
＃＃ よくある質問
よくある質問をいくつか紹介します。
ビデオチュートリアル
さらに詳しく
ここは初めてですか?ご心配なく、ご質問をお待ちしております。
わかりにくい点があれば、Github Discussion にフィードバックしてください。