多言語MDXサイトのためのGitベースCMS

仕組み

1. 1

   スキーマの定義

   コンテンツタイプはZodスキーマで定義します。翻訳対象のフィールド、英語のみのフィールド、ドキュメント間の参照方法などを設定します。

   // scribe.config.ts
   defineContentType({
     id: "blog",
     path: "/blog/{slug}",
     slugStrategy: "localized",
     schema: z.object({
       title: field.translatable(z.string().min(1)),
       description: field.translatable(z.string().min(50)),
       author: field.relation("author"),
       heroImage: field.structural(z.string().optional()),
     }),
   });

2. 2

   コンテンツの作成

   1つのドキュメントにつき1つのMDXファイルを作成し、リポジトリにコミットします。ファイル名が英語のスラッグとなり、フロントマターはスキーマに基づいて検証されます。

   ---
   title: "Hello, world"
   description: "A first post that says hello to the world."
   author: jane
   publishedAt: "2026-01-15"
   ---
   
   The body is MDX. **Markdown** and <Components /> both work.

3. 3

   差分のみを翻訳

   翻訳対象のコンテンツはハッシュ化され、不足分や古いページだけがGeminiに送信されます。Batch APIを利用するためトークンコストは半額。トランスクリエーションに特化したプロンプトで、ネイティブが書いたような自然な文章に仕上がります。出力はMDXとして解析されてから保存されるため、AIのミスでサイトが壊れることはありません。

   export GEMINI_API_KEY=...
   
   npx scribe translate --locale fr de --dry-run   # show the worklist
   npx scribe translate --locale fr de             # translate, validate, store
   git add .scribe/store.sqlite                    # translations live in git

4. 4

   型安全な読み込み

   ランタイムが設定からドキュメントの型を推論します。リスト、検索、リレーション、hreflangの代替URL、サイトマップの各要素が、すべて型付きで取得できます。

   const scribe = createScribe(config);
   
   const posts = scribe.blog.list("fr");                  // BlogDoc[]
   const { document } = scribe.blog.resolve(slug, "fr");  // EN fallback built in
   const author = scribe.blog.related(document!, "author"); // AuthorDoc
   const hreflang = scribe.blog.alternates(document!);

主な機能