# Fumadocs (Framework Mode, Next.js): MDX Remote
URL: /ja/docs/next/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` はコンテンツソースを指します。

`compile()` はコンパイル済みのコンテンツを React コンポーネントとして返します。これをページ内でレンダリングします。

```tsx title="app/docs/[[...slug]]/page.tsx"
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(props: PageProps<'/docs/[[...slug]]'>) {
  const { slug } = await props.params;
  const page = getPage(slug);
  const { body: MdxContent, toc } = await compiler.compile({
    source: page.content,
  });

  return (
    <DocsPage toc={toc}>
      <DocsBody>
        <MdxContent components={getMDXComponents()} />
      </DocsBody>
    </DocsPage>
  );
}
```

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

### 画像 [#images]

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

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