# Fumadocs (Framework Mode, Astro): MDX Remote
URL: /ja/docs/astro/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()` がそれを React アイランド内で実行します。

```astro tab="src/pages/docs/[...slug].astro"
---
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>
```

```tsx tab="src/components/docs.tsx"
import { useMemo } from 'react';
import { executeMdxSync } from '@fumadocs/mdx-remote/client';
import { type SerializedPageTree, useFumadocsLoader } from 'fumadocs-core/source/client';
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { DocsBody, DocsPage } from 'fumadocs-ui/layouts/docs/page';
import { Provider, type ProviderProps } from '@/components/provider';
import { getMDXComponents } from '@/components/mdx';

export interface DocsProps extends ProviderProps {
  tree: SerializedPageTree;
  compiled: string;
}

export function Docs({ tree, compiled, ...props }: DocsProps) {
  const data = useFumadocsLoader({ tree });
  const { default: MdxContent, toc } = useMemo(() => executeMdxSync(compiled), [compiled]);

  return (
    <Provider {...props}>
      <DocsLayout tree={data.tree}>
        <DocsPage toc={toc}>
          <DocsBody>
            <MdxContent components={getMDXComponents()} />
          </DocsBody>
        </DocsPage>
      </DocsLayout>
    </Provider>
  );
}
```

> `compile()` が返す `frontmatter` プロパティはバリデーションされません。`zod` などのライブラリでバリデーションしてください。

### 画像 [#images]

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

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