gemini-nexus/openspec/changes/localize-app-chinese-default/design.md

Design: Multilingual Support

Architecture

The application uses react-i18next for i18n and i18next-browser-languagedetector for language detection. Configuration is centralized in src/localization/i18n.ts.

Language Resources

Translation resources are built as JSON objects in i18n.ts (or split into files if they grow large). We add a zh-CN key in the resources object.

Default Language Strategy

We introduce the LanguageDetector plugin. i18n.use(LanguageDetector).init({...}) is configured to check localStorage first, then navigator (browser/system language). fallbackLng remains 'en' as the final fallback.

Key Mapping

Existing English strings are mapped to semantic keys (for example, home.title, settings.theme).

Data Flow

1. App starts.
2. i18next initializes and determines language via LanguageDetector:
   • Check whether localStorage has a saved preference.
   • If not, check navigator.language.
   • If detected language is supported (en or zh-CN), use it.
   • Otherwise, use fallbackLng (en).
3. Components use useTranslation to resolve strings for the active language.