⬅️ Back to Frontend Architecture Index
Internationalization (i18n)
1️⃣ Section Purpose
This section documents how Smart Supply Pro handles internationalization using i18next + react-i18next.
Goals: - German-first initial experience (with English fully
supported) - predictable namespace structure
(/locales/{{lng}}/{{ns}}.json) - compile-time
safety for translation keys via resources.d.ts
2️⃣ Scope & Boundaries
Included: - i18next initialization
(frontend/src/i18n/index.ts) - language detection +
persistence (localStorage key
i18nextLng) - namespace layout and JSON file
structure under frontend/public/locales/* -
TypeScript typing of namespaces/keys
(frontend/src/i18n/resources.d.ts) - help-content
integration (help topics map to help:* keys)
Excluded: - MUI theming and locale packs (see Theming) - Domain page behavior (see Domains)
3️⃣ High-Level Diagram
4️⃣ Section Map (Links to nested docs)
Contents
- Initialization & language selection - German-first defaults, detection order, persistence, and namespace loading
- Namespaces
& JSON resources - How namespaces map to
public/locales/*and how to add new keys - Type safety
with
resources.d.ts- Compile-time validation foruseTranslation()namespaces andt('...')keys - Usage
patterns & help content - Recommended
t()usage, cross-namespace calls, and the Help topics registry
Related ADRs
- ADR-0007: i18n strategy and language/region settings integration
- ADR-0001: Frontend folder structure strategy