Skip to content

Internationalization setup ​

At a glance

  • Wraps i18next + react-i18next; default language is Dutch (nl), falls back to English (en).
  • Exports i18n (the live instance apps actually use) and translations (a plain object — currently unused anywhere).
  • Add new keys to both locales/en.json and locales/nl.json.

packages/shared-i18n wraps i18next and react-i18next with the project's locale files, and exports a single ready-to-use instance.

What happens on import ​

i18n.ts imports the two locale files (locales/en.json, locales/nl.json) and immediately calls i18n.use(initReactI18next).init(...) at module load time — importing this file has the side effect of configuring the global i18next singleton. It's configured with:

  • lng: 'nl' — Dutch is the default language.
  • fallbackLng: 'en' — English is used for any key missing in the active language.
  • interpolation.escapeValue: false — i18next's own HTML-escaping is disabled, which is the standard setting for apps using React, since React already escapes interpolated values when rendering.

What the package exports ​

See Reference for the exact exports. There are two:

  • i18n (default export, re-exported by name) — the configured i18next instance described above. This is what apps actually use: both admin-ui and builder-ui import it in their main.tsx and pass it to react-i18next.
  • translations — a plain object ({ en, nl }) built from the same two locale JSON files, independent of the i18next instance. It's available if you need the raw strings without going through i18next (e.g. outside a React tree).

Unused today

As of this writing, nothing in the codebase imports translations — only i18n has active consumers. Treat it as currently unused rather than a documented pattern; if you reach for it, you'd be the first caller.

Adding or changing strings ​

Translation keys live in packages/shared-i18n/src/locales/en.json and nl.json. Since fallbackLng is en, a key missing from nl.json will render its English value rather than an empty string — but every key should still be added to both files to keep the two locales in sync.