# Fumadocs (Framework Mode, TanStack Start): MDX Remote
URL: /ja/docs/tanstack-start/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="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` などのライブラリでバリデーションしてください。

### 画像 [#images]

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

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