コンテンツへスキップ
Fumadocs

静的ビルド

Fumadocs で静的サイトを出力します。

セットアップ

Fumadocs はデフォルトでサーバーファーストのアプローチを採用しているため、稼働中のサーバーが必要です。 React Router を設定すれば、静的ビルドを出力できます。

静的ビルドにはサーバーが存在しないため、次の機能は動作しません。

  • 検索サーバー。代わりに静的検索を使用してください。
  • AIに質問。チャットルートから AI モデルを呼び出す必要があるためです。
  • MCP サーバー。

また、ミドルウェアも実行されないため、Accept ヘッダーに応じた Markdown の配信も行われません。

  1. 検索サーバーを設定します。
  2. 検索 UI/クライアントを設定します。

設定が完了すると、検索インデックスがアプリに静的に保存され、検索処理はブラウザ側で行われるようになります。

クラウドソリューション

検索機能はリモートサーバーで動作するため、静的エクスポートでも追加の設定なしで利用できます。

デプロイ

SPA モードでは、build/client ディレクトリを静的サイトとして配信できます。

プリレンダリングを忘れずに

SPA モードでは、サーバーサイドのローダーをすべてプリレンダリングする必要があります。

詳細については、React Router のドキュメントを参照してください。

react-router.config.ts
import type { Config } from '@react-router/dev/config';
import { glob } from 'node:fs/promises';
import { createGetUrl, getSlugs } from 'fumadocs-core/source';

const getUrl = createGetUrl('/docs');

export default {
  // SSR を無効化
  ssr: false,

  async prerender({ getStaticPaths }) {
    const paths: string[] = [...getStaticPaths()];

    for await (const entry of glob('**/*.{md,mdx}', { cwd: 'content/docs' })) {
      paths.push(getUrl(getSlugs(entry)));
    }

    return paths;
  },
} satisfies Config;

How is this guide?

最終更新日