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.