# Fumadocs (Framework Mode, React Router): MDX Remote
URL: /ja/docs/react-router/integrations/content/mdx-remote
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/integrations/content/mdx-remote.ja.mdx

Markdown/MDX コンテンツをオンデマンドでコンパイルします。

## はじめに [#introduction]

Fumadocs は **MDX Remote** パッケージを提供しています。これは Markdown/MDX のコンテンツソースを Fumadocs と統合するためのヘルパーです。
Fumadocs 向けのプラグインを組み込んだ `next-mdx-remote` のようなものと考えてください。

<Callout type="warn">
信頼できない MDX をコンパイラに渡さないでください。MDX はアプリ内で JavaScript として実行されます。信頼できないコンテンツは、代わりに Markdown としてコンパイルしてください。Markdown では JavaScript や生の HTML は実行されません。

```ts
import { createCompiler } from '@fumadocs/mdx-remote';

const compiler = createCompiler({
  format: 'md',
  // 画像サイズを取得するためのファイル読み込みと URL フェッチを行わない
  remarkImageOptions: false,
});
```
</Callout>

## セットアップ [#setup]

```package-install
@fumadocs/mdx-remote
```

主な機能は MDX コンパイラで、MDX コンテンツを JSX ノードにコンパイルします。
バンドラーを使用しないため、次のような制限があります。

* 画像はランタイムで最適化する必要があります。
* MDX ファイル内ではインポートとエクスポートを使用できません。

### 使い方 [#usage]

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

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

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

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

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

```tsx title="app/routes/docs.tsx"
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` などのライブラリでバリデーションしてください。

### 画像 [#images]

Vercel などのサーバーレスプラットフォームでは、元の `public` フォルダー (画像などの静的アセットを含む) は本番ビルド後に削除されます。
そのため、MDX コンパイラが `public` 内のローカル画像にアクセスできなくなる場合があります。

画像を参照する際は、必ず URL を使用してください。