新しいロケールの追加

ロケールを追加する

tyndale.config.json を開き、locales 配列にロケールコードを追加します:

{
  "defaultLocale": "en",
  "locales": ["es", "fr", "ja", "de"]
}

defaultLocale はソース言語なので、locales に含めてはいけません。

次に、以下を実行します:

npx tyndale translate

translate はまず抽出を自動実行し、その後新しいロケール向けの翻訳を生成します。既存のロケールファイルは、古いエントリのクリーンアップが必要な場合を除き変更されません。

ロケールエイリアス

localeAliases を使って、バリアントコードを正規のコードにマッピングします:

{
  "localeAliases": {
    "pt-BR": "pt",
    "zh-TW": "zh"
  }
}

RTL サポート

Tyndale は RTL ロケールを検出しますが、<html dir> を自動で変更はしません。現在のロケールヘルパーを使って、方向を明示的に設定してください:

import { getDirection } from 'tyndale-next/server';

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;

  return (
    <html lang={locale} dir={getDirection(locale)}>
      <body>{children}</body>
    </html>
  );
}

クライアントコンポーネントでは、レンダリングされた UI 内で現在の方向値が必要な場合に useDirection() を使用します。