Setup with React and i18next

This guide assumes the Collingo CLI is installed and you are logged in (collingo login). The workspace file .collingo.json is created when you run collingo init (step 3). After that you export translation files and connect them in a React app.

Steps

1. Create an app: pnpm create vite@latest and choose the React template (TypeScript recommended).
2. Install i18next: pnpm add i18next react-i18next.
3. In the project root, run collingo init, choose the react template, and set the export directory to src/locales (or another path you prefer).
4. Export translations: collingo export (if the template is configured) or collingo export i18next -d src/locales.

The export writes one translation.json per project language under <locale>/translation.json (for example de-DE/translation.json, en-US/translation.json). Translation keys match Collingo group paths plus the entry technical name, for example base.footer.labelCopyright.

i18next.ts

You can bundle the JSON by importing each locale file and passing them as resources. Keys in resources must match the language codes i18next resolves for lng (for example de, en). The browser’s window.navigator.language is often a BCP 47 tag like de-DE or en-US, which may not match short codes like de and en. If nothing renders, align lng with your resources keys, set fallbackLng, or normalize the language (for example map de-DE → de).

import i18next from "i18next";
import deDE from "./locales/de-DE/translation.json";
import enUS from "./locales/en-US/translation.json";
import { initReactI18next } from "react-i18next";

export default i18next.use(initReactI18next).init({
  lng: "en",
  fallbackLng: "en",
  debug: true,
  resources: {
    de: { translation: deDE },
    en: { translation: enUS },
  },
});

main.tsx

Import the setup file before rendering so i18next is initialized first:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./i18next.ts";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

App.tsx

Use useTranslation and pass Collingo keys as the t argument:

import { useTranslation } from "react-i18next";

export default function App() {
  const { t } = useTranslation();

  return <div>{t("base.footer.labelCopyright")}</div>;
}

Optional: load JSON at runtime

Instead of bundling imports, you can serve the same files as static assets and load them with i18next-http-backend (often together with i18next-browser-languagedetector). Point loadPath at your served files, for example /locales/{{lng}}/translation.json, after placing the export under your dev server’s public directory (e.g. public/locales in Vite). Locale folder names must match what you use in loadPath ({{lng}} is typically de-DE, en-US, etc., matching the export).

See also

• Export for i18next — CLI flags, workspace template fields in .collingo.json, and what the export contains on disk.