コンテンツへスキップ
Fumadocs

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 ファイル内ではインポートとエクスポートを使用できません。

使い方

コンパイラを作成します。

lib/compiler.ts
import { createCompiler } from '@fumadocs/mdx-remote';

export const compiler = createCompiler({
  // オプション
});

ページのコンテンツをコンパイルします。@/lib/source はコンテンツソースを指します。

compileFile() がローダー内でコンテンツを JavaScript にコンパイルし、executeMdxSync() がそれをクライアント側で実行します。

src/routes/docs/$.tsx
import { createFileRoute } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
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 const Route = createFileRoute('/docs/$')({
  component: Page,
  loader: ({ params }) => serverLoader({ data: params._splat?.split('/') ?? [] }),
});

const serverLoader = createServerFn({
  method: 'GET',
})
  .validator((slugs: string[]) => slugs)
  .handler(async ({ data: slugs }) => {
    const page = getPage(slugs);

    return {
      // JavaScript にコンパイルし、クライアントで実行されます
      compiled: String(await compiler.compileFile(page.content)),
      pageTree: await source.serializePageTree(source.getPageTree()),
    };
  });

function Page() {
  const { compiled, pageTree } = useFumadocsLoader(Route.useLoaderData());
  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?

最終更新日

このページの内容

はじめにセットアップ使い方画像
Sponsors
General TranslationGeneral TranslationFerry HealthFerry Healthassistant-uiassistant-uiInkeepInkeep