国際化（i18n）

アプリに多言語対応を追加しましょう。編集コンテンツのローカライズには Proyecta Content API を使用し、i18n フレームワークの組み込みは AI に依頼することもできます。

Proyecta は、作成するアプリを国際化するための、相互補完的な 2 つのアプローチをサポートしています。

Proyecta Content API によるコンテンツローカライズ — ブログ記事、FAQ、マーケティングコピーなど、複数言語に翻訳が必要な編集コンテンツ向け
翻訳フレームワークによるコードレベルの i18n — UI 文字列、日付、通貨、実行時のロケール切り替え向け

どちらも今すぐ使えます。何を翻訳するかによって、必要なアプローチが決まります。

Proyecta 自体は 24 ロケールに対応して出荷されており、プロダクトとして i18n に精通しています。その内部で構築するアプリにも、同じパターンが適用されます。

オプション 1: コンテンツローカライズ（Proyecta Content API）

ブログ、ナレッジベース、マーケティングページ、プロダクトカタログなど、コンテンツが多いサイトを構築している場合は、組み込みのロケールサポートを使用してください。サポートする言語を AI に伝えるだけで（"Make the site available in English, Spanish and French"）、英語をデフォルトとしてロケールが登録されます。あとは訪問者の言語でコンテンツを取得するだけです。

フロントエンド側では、テンプレートの型付きコンテンツフックがローカライズされたフィールドを解決してくれます — 訪問者のアクティブなロケールを渡すと、各 localized フィールドが翻訳済みの単一の値として返されます。

import { useCollection, useEntry } from '@/hooks/useContent';
import { useTranslation } from 'react-i18next';

function Blog({ slug }: { slug: string }) {
    const { i18n } = useTranslation();

    // List a collection in the current locale
    const { data: posts } = useCollection('posts', { locale: i18n.language });

    // Or read one entry by slug in the current locale
    const { data: post } = useEntry('posts', slug, { locale: i18n.language });

    // ...render posts / post
}

内部では CMS がフォールバックチェーンを辿ります — リクエストされたロケール → 設定済みのフォールバック → デフォルトロケール — という順序で、実際に提供したロケールコードを各エントリの localeResolved として報告します。単一言語サイトでは locale を省略すると、フィールドはそのままの値で返されます。

このアプローチが適しているのは次の場合です。

コードを書かない編集者がコンテンツを翻訳する必要がある
翻訳をバージョン管理したい
ロケールごとの公開設定が必要（スケジュール公開は近日対応予定 — 現在はエントリを API 経由で手動 publish する必要があります）

Content API の詳細についてはコンテンツ管理を参照してください。

オプション 2: コードレベルの i18n フレームワーク

ラベル、ボタン、エラーメッセージ、日付、通貨などの UI 文字列については、i18n フレームワークをプロジェクトに組み込むよう AI に依頼してください。

Add internationalization to my app.
Support English, Spanish, French, and Arabic.
Add message catalogs in src/locales/.
Add a language switcher in the header.
Use locale-prefixed URLs like /en/about and /es/about.
Make sure RTL layout works correctly for Arabic.

AI は以下を行います。

フレームワークの選定 — AI は i18next と react-i18next（Proyecta の標準）を使用します
カタログファイルの作成 — src/locales/ 配下に（言語ごとに 1 つの JSON ファイル）
テキストのラップ — react-i18next の useTranslation フックから t() 呼び出しで囲む
言語切り替えコンポーネントの追加
ロケールプレフィックス付き URL ルーティングの設定
RTL レイアウトの対応 — アラビア語、ヘブライ語などに対して dir="rtl" を設定
ロケールに応じた数値・日付・通貨のフォーマット

AI による自動翻訳

ベース言語が整ったら、AI を使って他のカタログファイルを効率よく生成できます。

"Translate every string in src/locales/en.json into Spanish, French, German, and Japanese. Use natural, idiomatic phrasing — don't translate brand names."
"My app is fully built in English. Add Spanish translations for everything and an es/ route prefix."

法的文書、医療、金融などの重要なコンテンツについては、リリース前に人間の翻訳者が AI の出力をレビューするようにしてください。

両方のアプローチを組み合わせる

実際のアプリの多くは両方を使います。ボタン、エラー、ナビゲーションなどの UI クローム部分にはコードレベルの i18n を、記事やプロダクト説明などの編集コンテンツには Content API を使用します。両者はクリーンに共存します — i18n フレームワークがビルド時にカタログファイルを処理し、Content API が実行時にローカライズされたエントリを提供します。

ベストプラクティス

まずベース言語を決め、コピーを確定させましょう。 変わり続けるコンテンツを翻訳するのは手間がかかります。
翻訳はまとめて行いましょう。 都度翻訳するのではなく、機能が安定してから行うようにしましょう。
アラビア語やヘブライ語をサポートするなら、RTL を早めにテストしましょう。 RTL のバグは実際に確認するまで気づきにくいものです。
<html> に lang と dir を設定しましょう。 ブラウザやスクリーンリーダーはこれらに依存しています。
フォーマットには Intl を使いましょう。 日付や通貨のフォーマットを独自実装せず、Intl.DateTimeFormat・Intl.NumberFormat を使用しましょう。

近日公開予定

Builder 内ロケール管理 UI — Proyecta を離れることなく、ロケールの選択、翻訳カバレッジの確認、カタログの編集が可能に
新規文字列の自動翻訳（保存時）
フレームワークがあらかじめ組み込まれた i18n 対応プロジェクトテンプレート