Internationalization

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

{
	"common": {
		"save": "Save",
		"cancel": "Cancel",
		"loading": "Loading..."
	},
	"auth": {
		"signIn": "Sign In",
		"signOut": "Sign Out",
		"email": "Email",
		"password": "Password"
	}
}

import { useTranslations } from "use-intl";

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

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

// Translation: "Hello, {name}!"
{
	t("greeting", { name: "John" });
}

// Translation: "You have {count, plural, one {# item} other {# items}}"
{
	t("itemCount", { count: 5 });
}

const t = useTranslations();

// Access nested keys
{
	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>
	);
}