コンテンツへスキップ
Fumadocs

サーバーエントリー

サーバー側でコレクションの出力にアクセスする方法です。

使い方

エントリーファイルからコレクションに直接アクセスすることもできますが、loader() と組み合わせて使うことをおすすめします。

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

// 生のコレクション
console.log(docs);

export const source = loader({
  baseUrl: '/docs',
  source: docs.toFumadocsSource(),
});

使用例

import { source } from '@/lib/source';

const page = source.getPage(['slugs']);

if (page) {
  // ページデータにアクセス
  console.log(page.data);

  // フロントマターのプロパティも利用できます
  console.log(page.data.title);
}

ページを (RSC で) レンダリングするには、page.data.body をコンポーネントとして使用します。

import { getMDXComponents } from '@/components/mdx';

const MDX = page.data.body;

// `components` prop で MDX コンポーネントを設定します
return <MDX components={getMDXComponents()} />;

How is this guide?

最終更新日