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 はコンテンツソースを指します。
compile() はコンパイル済みのコンテンツを React コンポーネントとして返します。これをページ内でレンダリングします。
import type { PageProps } from 'waku/router';
import { DocsBody, DocsPage } from 'fumadocs-ui/layouts/docs/page';
import { compiler } from '@/lib/compiler';
import { getPage } from '@/lib/source';
import { getMDXComponents } from '@/components/mdx';
export default async function Page({ slugs }: PageProps<'/docs/[...slugs]'>) {
const page = getPage(slugs);
const { body: MdxContent, toc } = await compiler.compile({
source: page.content,
});
return (
<DocsPage toc={toc}>
<DocsBody>
<MdxContent components={getMDXComponents()} />
</DocsBody>
</DocsPage>
);
}
export async function getConfig() {
return {
render: 'static',
// 全ページの slug
staticPaths: [[], ['getting-started']],
} as const;
}compile() が返す frontmatter プロパティはバリデーションされません。zod などのライブラリでバリデーションしてください。
画像
Vercel などのサーバーレスプラットフォームでは、元の public フォルダー (画像などの静的アセットを含む) は本番ビルド後に削除されます。
そのため、MDX コンパイラが public 内のローカル画像にアクセスできなくなる場合があります。
画像を参照する際は、必ず URL を使用してください。
How is this guide?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep