i18n

Akilocale wraps i18next, react-i18next, and i18next-http-backend, providing a consistent and pre-configured way to translate texts in both shell and client applications.

Overview

For internationalization in UI Protocol applications, we use the @akinon/akilocale library.

Shell Application i18n

The shell application uses Akilocale's i18n instance for translations. The library comes pre-configured, so you can start using it directly:

import { i18n, useTranslation } from '@akinon/akilocale/react';

const ShellHeader = () => {
  const { t } = useTranslation();

  return (
    <nav>
      <a href="/dashboard">{t('dashboard')}</a>
      <a href="/orders">{t('orders')}</a>
      <a href="/products">{t('products')}</a>
    </nav>
  );
};

Custom Configuration (Optional)

If you need to customize the i18n behavior (e.g., custom loadPath for translation files), you can configure it:

import { i18n } from '@akinon/akilocale/react';

// Only needed for custom configurations
i18n.init({
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json'
  }
});

Sharing Language with Clients

To ensure micro-frontend clients use the same language as the shell, include the current language in the shared data:

import { i18n } from '@akinon/akilocale/react';

const App = () => {
  const [language, setLanguage] = useState('en');

  const sharedData: ApplicationData = {
    locale: language,
    // ... other shared data
  };

  // Sync i18n language
  useEffect(() => {
    i18n.changeLanguage(language);
  }, [language]);

  return (
    <AppShellProvider data={sharedData} {...otherProps}>
      <ShellContent />
    </AppShellProvider>
  );
};

Clients can then read the locale from shared data and configure their own i18n instance accordingly.

Language Switching

When the shell changes language, update the shared data:

import { i18n } from '@akinon/akilocale/react';

const LanguageSwitcher = () => {
  const [sharedData, setSharedData] = useSharedData(); // Your state management

  const handleLanguageChange = (newLang: string) => {
    i18n.changeLanguage(newLang);
    setSharedData(prev => ({ ...prev, locale: newLang }));
  };

  return (
    <select onChange={(e) => handleLanguageChange(e.target.value)}>
      <option value="en">English</option>
      <option value="tr">Türkçe</option>
    </select>
  );
};

Learn More

For detailed information about the Akilocale library and its features:

• Akilocale Documentation - Complete guide to internationalization

Client applications manage their own translations independently using Akilocale. See the Client i18n documentation for client-side internationalization.