# i18n

### <mark style="color:red;">Overview</mark>

For internationalization in UI Protocol applications, we use the `@akinon/akilocale` library.&#x20;

### <mark style="color:red;">Shell Application i18n</mark>

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

```tsx
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:

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

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

### <mark style="color:red;">Sharing Language with Clients</mark>

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

```tsx
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.

### <mark style="color:red;">Language Switching</mark>

When the shell changes language, update the shared data:

```tsx
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>
  );
};
```

### <mark style="color:red;">Learn More</mark>

For detailed information about the Akilocale library and its features:

* Akilocale Documentation - Complete guide to internationalization

{% hint style="info" %}
Client applications manage their own translations independently using Akilocale. See the Client i18n documentation for client-side internationalization.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.akinon.com/akinon-ui/ui-protocol/shell-application/i18n.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.