Internationalization & Localization

This page explains how internationalization (i18n) and localization (l10n) are implemented in the Klickbee CMS repository.

---

Overview

Klickbee CMS uses the next-intl library to provide multi-language support for both the admin and frontend interfaces. This allows users to experience the CMS in their preferred language.

---

How It Works

1. Locale Detection

The default locale is determined based on the setting stored in the database under the key system_lang.

• If no value is set, the app defaults to 'en' (English) and saves it as the default.

This logic can be found in:

// src/i18n/request.ts
let locale = await getSetting("system_lang");
if (!locale) {
  locale = "en";
  await setSetting("system_lang", locale);
}

---

2. Translation Files

All translation strings are stored in JSON files under the src/translations/ directory.

• Each language has its own file, e.g., en.json, fr.json.
• The correct file is loaded dynamically based on the detected locale.

---

3. Using Translations in the App

The useTranslations hook from next-intl is used to access translation strings in React components.

Example:

import { useTranslations } from "next-intl";
const t = useTranslations("BuilderSettings");

return <h1>{t("Title")}</h1>;

---

4. Adding or Editing Languages

1. Create or update a language file in src/translations/, e.g. es.json for Spanish.
2. Add or update translation keys and values as needed.
3. If adding a new language, update the setting (system_lang) to allow users to select it.

---

5. Switching Languages

Admins can change the default language by updating the system_lang setting via the settings API or admin interface.
This will cause the application to load the corresponding translation file for all users.

---

6. Best Practices

• Always use the translation hook (useTranslations) for all text displayed to users.
• Avoid hard-coding strings directly in components.
• Keep translation keys organized by feature or section.

---

7. Where to Look

• Locale management: src/i18n/request.ts
• Translation files: src/translations/
• Usage in UI: components/pages using useTranslations

---

Tip:
If you add new features or UI components, remember to provide translation keys and values for all supported languages!