MDX Remote
Markdown/MDX コンテンツをオンデマンドでコンパイルします。
はじめに
Fumadocs は MDX Remote パッケージを提供しています。これは Markdown/MDX のコンテンツソースを Fumadocs と統合するためのヘルパーです。
Fumadocs 向けのプラグインを組み込んだ next-mdx-remote のようなものと考えてください。
信頼できない MDX をコンパイラに渡さないでください。MDX はアプリ内で JavaScript として実行されます。信頼できないコンテンツは、代わりに Markdown としてコンパイルしてください。Markdown では JavaScript や生の HTML は実行されません。
import { createCompiler } from '@fumadocs/mdx-remote';
const compiler = createCompiler({
format: 'md',
// 画像サイズを取得するためのファイル読み込みと URL フェッチを行わない
remarkImageOptions: false,
});セットアップ
npm install @fumadocs/mdx-remote主な機能は MDX コンパイラで、MDX コンテンツを JSX ノードにコンパイルします。 バンドラーを使用しないため、次のような制限があります。
- 画像はランタイムで最適化する必要があります。
- MDX ファイル内ではインポートとエクスポートを使用できません。
使い方
コンパイラを作成します。
import { createCompiler } from '@fumadocs/mdx-remote';
export const compiler = createCompiler({
// オプション
});ページのコンテンツをコンパイルします。@/lib/source はコンテンツソースを指します。
compileFile() がローダー内でコンテンツを JavaScript にコンパイルし、executeMdxSync() がそれをクライアント側で実行します。
import type { Route } from './+types/docs';
import { useMemo } from 'react';
import { executeMdxSync } from '@fumadocs/mdx-remote/client';
import { useFumadocsLoader } from 'fumadocs-core/source/client';
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { DocsBody, DocsPage } from 'fumadocs-ui/layouts/docs/page';
import { compiler } from '@/lib/compiler';
import { getPage, source } from '@/lib/source';
import { getMDXComponents } from '@/components/mdx';
export async function loader({ params }: Route.LoaderArgs) {
const page = getPage(params['*'].split('/').filter((v) => v.length > 0));
return {
// JavaScript にコンパイルし、クライアント側で実行します
compiled: String(await compiler.compileFile(page.content)),
pageTree: await source.serializePageTree(source.getPageTree()),
};
}
export default function Page({ loaderData }: Route.ComponentProps) {
const { compiled, pageTree } = useFumadocsLoader(loaderData);
const { default: MdxContent, toc } = useMemo(() => executeMdxSync(compiled), [compiled]);
return (
<DocsLayout tree={pageTree}>
<DocsPage toc={toc}>
<DocsBody>
<MdxContent components={getMDXComponents()} />
</DocsBody>
</DocsPage>
</DocsLayout>
);
}compile() が返す frontmatter プロパティはバリデーションされません。zod などのライブラリでバリデーションしてください。
画像
Vercel などのサーバーレスプラットフォームでは、元の public フォルダー (画像などの静的アセットを含む) は本番ビルド後に削除されます。
そのため、MDX コンパイラが public 内のローカル画像にアクセスできなくなる場合があります。
画像を参照する際は、必ず URL を使用してください。
How is this guide?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep