はじめに

はじめにアンカーリンクをコピー

Fumadocs MDX は、Content Collections と同様に、コンテンツを型安全なデータに変換するツールです。

本格的な CMS ではなく、React フレームワーク向けのコンテンツ処理レイヤーです。ブログ記事などのコンテンツの管理にも利用できます。

Collection とは？アンカーリンクをコピー

Collection とは、特定の種類のファイルをまとめたものです。アプリ内で Macro API を使って定義できます。

import { defineDocs } from 'fumadocs-mdx/macro';
import { loader } from 'fumadocs-core/source';

const docs = defineDocs({
  dir: 'content/docs',
});

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

利用できるコレクションは次のとおりです。

import { defineCollections } from 'fumadocs-mdx/macro';

export const test = defineCollections({
  type: 'doc',
  dir: 'content/docs',
});

たとえば、doc コレクションは次のような .md および .mdx ファイルを変換します。

Config API を使って source.config.ts でコレクションを定義することもできます。この場合、エントリーファイルは .source 配下に生成されます。

インストールアンカーリンクをコピー

使用する環境に合わせて Fumadocs MDX を設定してください。

よくある質問アンカーリンクをコピー

組み込みプロパティアンカーリンクをコピー

以下のプロパティは、MDX ファイルからデフォルトでエクスポートされます。

フロントマターのカスタマイズアンカーリンクをコピー

schema オプションでバリデーションスキーマを渡すと、フロントマターを検証し、その出力プロパティを定義できます。

MDX ページでは、フロントマターをコードでエクスポートすることもできます。エクスポートした値は YAML フロントマターを上書きする形でマージされ、その結果がコレクションのスキーマで検証されます。

---
title: Introduction
---

import { version } from '../../package.json';

export const frontmatter = {
  description: `The docs of v${version}.`,
};

このエクスポートはビルド時に実行されます。ページのインポートや、同じブロック内でそれより前に記述されたエクスポートは使用できますが、ページのコンテンツやコンポーネントは使用できません。staticParams は YAML フロントマターに記述したままにしてください。ローダーはエクスポートが実行される前にこの値を読み取るためです。

コンパイラのカスタマイズアンカーリンクをコピー

Fumadocs MDX は、MDX Compiler を通じて unified で MDX ファイルを JavaScript ファイルにコンパイルします。

コレクションごとに、代わりに Sätteri でコンパイルすることもできます。どちらにも、プラグインと設定のデフォルトプリセットが用意されています。

コンパイラはグローバル設定またはコレクション設定でカスタマイズできます。