レシピ

zfb を使うための自己完結したパターンと、作り込まれたサンプルサイトの解説。キュレーションされたセクションで、1 ページ 1 トピックです。

メンテナーがキュレーションしたセクションで、2 種類のページがあります。

• レシピ — zfb のプリミティブ（addVirtualModule、postBuild プラグイン、ctx.routes、非 HTML ページ、MDX コンポーネント）を組み合わせて、あなた自身のケースに応用できる具体的な解決策にまとめます。

• サンプルサイト — プロジェクト 1 つを丸ごと解説します。それぞれにクローンできる公開リポジトリがあり、1 つを除いて稼働中のデモもあります。

どちらのページも次のようなものです。

• 1 トピックにつき 1 記事

• コードの羅列ではなく解説として書かれる — なぜ そうするのかは どうやって と同じくらい重要です

• 特定の zfb バージョン範囲に紐づく — どのエンジンの状態を前提としているかが分かります

外部のサンプルリポジトリは zfb 3.1.0 を固定して使い（2026-10-03 時点で確認）、zudo-react を採用しています。スタイリングでは設定に応じて zudo-wind のユーティリティを使い、CSS も自分で記述しています。

レシピ

• Enlargeable Images — かつての組み込み機能 imageEnlarge を、img コンポーネントのオーバーライドを使ってユーザーランドで再現します。サーバーサイド（JS なし）版とアイランド版の両方、そして no-enlarge によるオプトアウトを扱います。

• Admonitions — directives 機能を使い、最小限のコンポーネントスタブと CSS フックで :::note、:::tip、:::info、:::warning、:::danger、:::caution、:::details を登録します。

サンプルサイト

10 のスタンドアロンなリポジトリで、それぞれが完全な zfb プロジェクトです。9 つは Cloudflare 上で実際に稼働しており、Agent Conversations はデプロイされずローカルで動きます。以下の各ページは、そのサンプルが何を示しているか、どのような技術構成か、どう動くか、ローカルでどう実行するかを解説し、クローンできるリポジトリへリンクしています。同じ 10 個を並べて見比べるには サンプル の比較表を参照してください。

• Agent Conversations — フレームワークに依存しない会話コントローラーの上に zudo-react アイランドを 1 つ置いた静的なシェル。キューに入る実行、キャンセル、レビュー済みのホスト変更を、メモリのみのサービスかローカルの HTTP と SQLite のサーバーで扱います。プロバイダーは合成で、デプロイはありません。

• AI Summarizer — zudo-react アイランド 1 つが prerender = false のルートへ POST し、そのルートが Workers AI バインディングを呼びます。決定的なフォールバックがあるため、Cloudflare アカウントなしでもエンドポイントは応答します。

• Blog — Markdown と MDX による純粋 SSG のブログ。3 種類の動的ルート、paginate()、zudo-react のテーマ切り替えアイランド 1 つ、CSS を自分で書いたデザインシステムを扱います。zudo-wind は owned-v1 リセットだけを提供します。SSR もアダプタもありません。

• Corporate Website — zudo-react で静的レンダリングするマーケティングサイトで、CSS Modules だけでスタイリングします。wind: false を設定して zudo-wind を無効にし、CSS を自分で記述しています。

• JSON API — もっとも小さく完結した SSR スターター。prerender = false の GET エンドポイントが 2 つあり、一方は MiniSearch のインデックスを遅延構築してウォームな isolate 間で使い回します。事前に用意するものはありません。

• KV Guestbook — Cloudflare バインディングへの書き込み経路。1 つのルートが投稿一覧のレンダリングと JavaScript なしのフォーム POST の両方を Workers KV に対して処理し、トークンで保護された管理用削除も備えます。

• Password Gate — run_worker_first = true の手書き Worker を静的サイトの前段に置きます。zfb アダプタを使わずに Cloudflare とやり取りする唯一のサンプルで、ライブデモは意図的に 401 を返します。

• Reverse Proxy — キャッチオールの prerender = false ルートが、メソッド・パス・クエリ・ボディを固定のアップストリームへ転送します。両方向でのヘッダー処理を意図的に設計しています。

• Webshop — アカウント・カート・チェックアウトを備えた Cloudflare D1 上の全 SSR ショップ。すべてのルートが prerender = false で、すべてのボタンがフォームなので、ビルドは HTML もクライアント JavaScript も出力しません。

• Workers Cache — キャッシュを HTTP だけで表現します。ルートごとの Cache-Control、Cache-Tag、Vary に加えて、ctx.cache.purge() を呼ぶトークン保護つきのパージルートを備えます。