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() がそれを React アイランド内で実行します。
---
import type { GetStaticPaths, InferGetStaticPropsType } from 'astro';
import Layout from '@/layouts/Layout.astro';
import { Docs } from '@/components/docs';
import { compiler } from '@/lib/compiler';
import { getPage, source } from '@/lib/source';
export const prerender = true;
export const getStaticPaths = (() => {
return source.getPages().map((page) => ({
params: { slug: decodeURI(page.slugs.join('/')) || undefined },
props: { page },
}));
}) satisfies GetStaticPaths;
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
const { page } = Astro.props;
const pageTree = await source.serializePageTree(source.getPageTree());
// JavaScript にコンパイルします（アイランド内で実行されます）
const compiled = String(await compiler.compileFile(getPage(page.slugs).content));
---
<Layout title={page.data.title}>
<Docs
client:load
pathname={Astro.url.pathname}
params={Astro.params}
tree={pageTree}
compiled={compiled}
/>
</Layout>compile() が返す frontmatter プロパティはバリデーションされません。zod などのライブラリでバリデーションしてください。
画像
Vercel などのサーバーレスプラットフォームでは、元の public フォルダー (画像などの静的アセットを含む) は本番ビルド後に削除されます。
そのため、MDX コンパイラが public 内のローカル画像にアクセスできなくなる場合があります。
画像を参照する際は、必ず URL を使用してください。
How is this guide?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep