Edge i18n を使ったインタラクティブ MDX

これは通常の Markdown 段落です。あなたが今読んでいるテキストはファイルシステム上にあります。

しかし、ニュースレター登録フォームのような動的コンポーネントを追加したい場合はどうでしょう？通常、ボタンラベルなどは React コンポーネントの中にハードコーディングする必要があります。

「ハイブリッド」コンポーネント

以下は React Island です。構造はコードで定義されていますが、テキストラベルは Cloudflare KV から取得されています。 言語を日本語に切り替えてみてください。コードを変更することなく、コンポーネントが自動的に更新されるのがわかります。

仕組み

1. ページが読み込まれると、KV から blog 名前空間の翻訳が取得されます。
2. Astro はこれらの翻訳を props として <Newsletter /> コンポーネントに渡します。
3. コンポーネントは client:visible を使って正しい言語でクライアント側でハイドレーションされます。

これにより、コンテンツ制作者はローカライズファイルを意識することなく、複雑な UI ウィジェットを利用できます。