# Fumadocs (Framework Mode, Next.js): AsyncAPI
URL: /ja/docs/next/integrations/asyncapi
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/integrations/asyncapi/index.ja.mdx

AsyncAPI スキーマからドキュメントを生成します。

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

必要なパッケージをインストールします。

```npm
npm i @fumadocs/asyncapi shiki
```

### スタイルの生成 [#generate-styles]

次の行を追加してください。

```css title="Tailwind CSS"
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
/* [!code ++] */
@import '@fumadocs/asyncapi/css/preset.css';
```

### プラグインの設定 [#configure-plugin]

AsyncAPI サーバーインスタンスと `<AsyncAPIPage />` コンポーネントを作成します。

```ts tab="lib/asyncapi.ts"
import { createAsyncAPI } from '@fumadocs/asyncapi/server';

// 注: これはサーバーサイド専用の API です
export const asyncapi = createAsyncAPI({
  // AsyncAPI スキーマ。外部 URL を指定することもできます。
  input: ['./asyncapi.yaml'],
});
```

```tsx tab="components/api-page.tsx"
'use client';
import { createAsyncAPIPage } from '@fumadocs/asyncapi/ui';

export const AsyncAPIPage = createAsyncAPIPage();
```

各オプションの詳細については、[`createAsyncAPI()`](/docs/next/integrations/asyncapi/server) と [`createAsyncAPIPage()`](/docs/next/integrations/asyncapi/api-page) を参照してください。

### ページを生成する [#generate-pages]

[`loader()`](/docs/headless/source-api/source) に `staticSource()` を渡します。これにより、ファイルを書き出さずにページを生成できます。

```ts title="lib/source.ts"
import { loader } from 'fumadocs-core/source';
import { defineDocs } from 'fumadocs-mdx/macro';
import { asyncapi } from '@/lib/asyncapi'; // [!code ++]

const docs = defineDocs({
  dir: 'content/docs',
});

export const source = loader(
  // [!code ++:6]
  {
    docs: docs.toFumadocsSource(),
    asyncapi: await asyncapi.staticSource({
      baseDir: 'asyncapi',
    }),
  },
  {
    baseUrl: '/docs',
    // [!code ++:2] 任意: ページツリーの各ページアイテムにメッセージの方向を追加します
    plugins: [asyncapi.loaderPlugin()],
  },
);
```

`staticSource()` は、デフォルトでオペレーションごとに1ページを生成します。カスタマイズ方法については[ページの生成](/docs/next/integrations/asyncapi/generate-files)を参照してください。

**`source` のページは、`docs` と `asyncapi` の2種類になりました。** LLM 向けのテキストを返す箇所など、`source` を使用しているすべての箇所を更新してください。

```ts
import { llms } from 'fumadocs-core/source';
import { source } from '@/lib/source';

export const docsLlms = llms(source, {
  renderPage: async (page) => {
    // [!code ++:3]
    if (page.type === 'asyncapi') {
      return `# ${page.data.title}\n\n${await page.data.getText('processed')}`;
    }

    // 以下は既存の処理...
  },
});
```

docs ページで `<AsyncAPIPage />` を使用して、AsyncAPI ページをレンダリングします。

```tsx title="app/docs/[[...slug]]/page.tsx"
import { AsyncAPIPage } from '@/components/api-page'; // [!code ++]

export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
  const params = await props.params;
  const page = source.getPage(params.slug);
  if (!page) notFound();

  // [!code ++:10]
  if (page.type === 'asyncapi') {
    return (
      <DocsPage full>
        <DocsTitle>{page.data.title}</DocsTitle>
        <DocsBody>
          <AsyncAPIPage {...page.data.getAsyncAPIPageProps()} />
        </DocsBody>
      </DocsPage>
    );
  }

  // ...
}
```

<Callout type="warn" title="移行が完了していることを確認してください">
次に進む前に、型チェックを実行してください。

```npm
npm run types:check
```
</Callout>

MDX ファイルをコンテンツディレクトリに書き出したい場合は、[MDX ファイル](/docs/next/integrations/asyncapi/generate-files#mdx-files)を参照してください。

## 機能 [#features]

公式の AsyncAPI インテグレーションは AsyncAPI 3 をサポートしており、以下を提供します。

* 読者から見たメッセージの方向、オペレーションのサーバーとチャンネルのアドレス
* メッセージとそのペイロードおよびヘッダーのスキーマ(Avro、Protobuf、RAML のスキーマを含む)
* メッセージの例(ドキュメントに記載されたもの、またはスキーマから生成したもの)
* リクエストと応答、相関 ID
* セキュリティスキーム(OAuth 2.0 フローや SASL メカニズムを含む)
* 選択したサーバーについて、バインディングから取得したプロトコルの詳細
* WebSocket、Server-Sent Events、カスタムトランスポートに対応したプレイグラウンド(テキストメッセージとバイナリメッセージの両方に対応)
* WebSocket、MQTT、Kafka、AMQP、NATS 向けの JavaScript と Python のコードサンプル
* ペイロードとヘッダーの TypeScript 型定義
* LLM 向けのページの Markdown
* トレイト

AsyncAPI 2 のドキュメントは `npx @asyncapi/cli convert` で変換できます。

### デモ [#demo]

[AsyncAPI のサンプル](/docs/asyncapi)をご覧ください。