国際化

packages/i18n/src/locales/
├── en.json
├── zh.json
└── jp.json

{
	"common": {
		"save": "保存",
		"cancel": "キャンセル",
		"loading": "読み込み中..."
	},
	"auth": {
		"signIn": "サインイン",
		"signOut": "サインアウト",
		"email": "メール",
		"password": "パスワード"
	}
}

import { useTranslations } from "use-intl";

export function MyComponent() {
	const t = useTranslations("common");

	return <button>{t("save")}</button>;
}

// 翻訳：「こんにちは、{name}さん！」
{
	t("greeting", { name: "太郎" });
}

// 翻訳：「{count}個のアイテムがあります」（複数形）
{
	t("itemCount", { count: 5 });
}

const t = useTranslations();

// ネストされたキーにアクセス
{
	t("auth.signIn");
}
{
	t("common.loading");
}

import { useLocale } from "use-intl";
import { useRouter } from "@tanstack/react-router";

export function LanguageSwitcher() {
	const locale = useLocale();
	const router = useRouter();

	const switchLocale = (newLocale: string) => {
		router.navigate({
			to: router.state.location.pathname,
			search: { locale: newLocale },
		});
	};

	return (
		<select value={locale} onChange={(e) => switchLocale(e.target.value)}>
			<option value="en">English</option>
			<option value="zh">中文</option>
			<option value="jp">日本語</option>
		</select>
	);
}