Skip to main content

Internationalization (i18n)

Go global with multi-language support.

Overview​

LibreApps Desktop is built with internationalization (i18n) in mind, allowing you to easily translate your dashboard into multiple languages. It uses Next.js 15's built-in i18n routing and a simple translation system to provide a seamless experience for users around the world.

Key Features​

  • Language Routing: Automatically detect the user's preferred language and redirect them to the appropriate localized route (e.g., /en/dashboard, /fr/dashboard).
  • Dynamic Translations: Easily translate text, dates, and numbers using a simple and flexible API.
  • RTL Support: Built-in support for right-to-left (RTL) languages like Arabic and Hebrew.
  • Language Switcher: A pre-built component that allows users to manually change the application's language.
  • SEO Friendly: Localized URLs and meta tags ensure that your dashboard is easily discoverable in different languages.

How it Works​

  1. Configuration: Define your supported languages and default locale in src/i18n/config.ts.
  2. Translation Files: Create JSON files for each language containing your translated strings (e.g., public/locales/en.json, public/locales/fr.json).
  3. Usage: Use the useTranslation hook or the t function to display translated text in your components.
import { useTranslation } from '@/hooks/use-translation';

export function MyComponent() {
  const { t } = useTranslation();

  return <h1>{t('welcome_message')}</h1>;
}

Adding a New Language​

  1. Add the new language code to the locales array in src/i18n/config.ts.
  2. Create a new JSON file in public/locales/ with the language code as the filename (e.g., es.json).
  3. Translate all the strings in the new JSON file.
  4. The new language will automatically appear in the language switcher.

Best Practices​

  • ✅ Do this: Use keys instead of hardcoded strings for all user-facing text.
  • ✅ Do this: Provide fallback translations for missing keys.
  • ❌ Don't do this: Use machine translation for everything; have a native speaker review your translations for accuracy and cultural relevance.