Internationalization

Overview

Admindek ships with a built-in locale system covering three languages: English, German, and French. The active locale is selectable from the Theme Customizer (gear icon in the dashboard header) and is persisted in localStorage so the user's language choice survives page reloads.

How It Works

A LocaleProvider wraps the application in the root layout and makes translations available to the entire component tree. Consume them anywhere with the useTranslations() hook, which returns a t(key) function. Translation keys are fully type-safe — TypeScript will error if you reference a key that does not exist in the message files.

Translation Files

Message files live at packages/core/lib/i18n/messages/ — one JSON file per language (en.json, de.json, fr.json). They share the same nested structure, split into logical sections:

{
  "sidebar": {
    "dashboard": "Dashboard",
    "analytics": "Analytics",
    "ecommerce": "E-commerce"
  },
  "header": {
    "search": "Search",
    "notifications": "Notifications",
    "profile": "Profile"
  },
  "common": {
    "save": "Save",
    "cancel": "Cancel",
    "delete": "Delete",
    "edit": "Edit"
  },
  "dashboard": {
    "totalRevenue": "Total Revenue",
    "totalOrders": "Total Orders",
    "totalUsers": "Total Users"
  }
}

Using Translations

Import useTranslations from the locale context and call the returned t() function with a dot-separated key:

import { useTranslations } from "@dashboardpack/core/lib/i18n/locale-context";

function MyComponent() {
  const t = useTranslations();
  return <button>{t("common.save")}</button>;
}

Adding a New Language

To add a fourth language, follow these three steps:

1. Create xx.json in packages/core/lib/i18n/messages/ with all keys translated into the new language.
2. Add the new locale identifier to the locales array in packages/core/lib/i18n/config.ts.
3. Import the new file and add it to the messagesMap object inside packages/core/lib/i18n/locale-context.tsx.

Once registered, the new locale will appear automatically in the Theme Customizer's language selector.

Adding New Keys

Add the new key to all three JSON files (en.json, de.json, fr.json) to keep them in sync. TypeScript will automatically pick up and validate the new key wherever t() is called, giving you autocomplete and compile-time safety.