--- name: i18n-patterns description: Internationalization patterns for Lingx. Type-safe translations with Lingx SDK, ICU MessageFormat, key naming conventions, and extraction. Use when adding translations, reviewing i18n code, or troubleshooting translation issues. --- # Lingx i18n Patterns Type-safe internationalization patterns using the Lingx SDK. ## Quick Reference ```tsx import { useTranslation, tKey, tKeyUnsafe, type TKey } from '@lingx\/sdk-nextjs'; \/\/ In component const { t, td } = useTranslation('namespace'); t('key.path') \/\/ Static key td(tKey('key.path')) \/\/ Dynamic key, type-safe td(tKeyUnsafe(`${var}.title`)) \/\/ Dynamic key, escape hatch ``` ## File Organization ``` apps\/web\/public\/locales\/ ├── en.json # Root namespace (common strings) ├── ru.json ├── dashboard\/ # Dashboard namespace │ ├── en.json │ └── ru.json ├── settings\/ # Settings namespace │ ├── en.json │ └── ru.json ├── projects\/ # Projects namespace │ ├── en.json │ └── ru.json └── workbench\/ # Workbench namespace ├── en.json └── ru.json ``` ## Documentation | Document | Purpose | | -------------------------------- | -------------------------- | | [key-naming.md](key-naming.md) | Key naming conventions | | [type-safety.md](type-safety.md) | TKey, tKey(), tKeyUnsafe() | | [icu-format.md](icu-format.md) | ICU MessageFormat patterns | | [extraction.md](extraction.md) | Key extraction and CLI | ## Core Concepts ### Translation Functions | Function | Use Case | Type Safety | | ------------------- | ------------------------------ | ----------- | | `t('key')` | Static string literal keys | Full | | `td(dynamicKey)` | Dynamic keys from variables | Via tKey | | `tKey('key')` | Create type-safe key reference | Full | | `tKeyUnsafe('key')` | Escape hatch for dynamic keys | None | ### Namespace Usage ```tsx \/\/ Using namespace - looks in [namespace]\/en.json const { t } = useTranslation('settings'); t('title'); \/\/ Looks for "title" in settings\/en.json \/\/ Root namespace - looks in en.json const { t } = useTranslation(); t('common.save'); \/\/ Looks for "common.save" in en.json ``` ### Basic Usage ```tsx 'use client'; import { useTranslation } from '@lingx\/sdk-nextjs'; export function SettingsPage() { const { t } = useTranslation('settings'); return (

{t('title')}<\/h1>
{t('description')}<\/p>