Implement multilingual support: Integrate i18next for language translation across components, update configuration for multilingual descriptions and keywords, and enhance user interface elements with dynamic language switching. Add new dependencies for i18next and related libraries in package.json and package-lock.json.

2025-07-16 02:34:36 +02:00
parent b78de53786
commit cff9c88808
29 changed files with 3347 additions and 86 deletions
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -0,0 +1,98 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+// Import all translation files
+import translationDE from './locales/de/translation.json';
+import translationEN from './locales/en/translation.json';
+import translationES from './locales/es/translation.json';
+import translationFR from './locales/fr/translation.json';
+import translationIT from './locales/it/translation.json';
+import translationPL from './locales/pl/translation.json';
+import translationHU from './locales/hu/translation.json';
+import translationSR from './locales/sr/translation.json';
+import translationBG from './locales/bg/translation.json';
+import translationRU from './locales/ru/translation.json';
+import translationUK from './locales/uk/translation.json';
+import translationSK from './locales/sk/translation.json';
+import translationCS from './locales/cs/translation.json';
+import translationRO from './locales/ro/translation.json';
+
+const resources = {
+  de: {
+    translation: translationDE
+  },
+  en: {
+    translation: translationEN
+  },
+  es: {
+    translation: translationES
+  },
+  fr: {
+    translation: translationFR
+  },
+  it: {
+    translation: translationIT
+  },
+  pl: {
+    translation: translationPL
+  },
+  hu: {
+    translation: translationHU
+  },
+  sr: {
+    translation: translationSR
+  },
+  bg: {
+    translation: translationBG
+  },
+  ru: {
+    translation: translationRU
+  },
+  uk: {
+    translation: translationUK
+  },
+  sk: {
+    translation: translationSK
+  },
+  cs: {
+    translation: translationCS
+  },
+  ro: {
+    translation: translationRO
+  }
+};
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: 'de', // German as fallback since it's your primary language
+    lng: 'de', // Default language
+    debug: process.env.NODE_ENV === 'development',
+
+    // Language detection options
+    detection: {
+      // Order of language detection methods
+      order: ['localStorage', 'navigator', 'htmlTag'],
+      // Cache the language selection
+      caches: ['localStorage'],
+      // Check for language in localStorage
+      lookupLocalStorage: 'i18nextLng'
+    },
+
+    interpolation: {
+      escapeValue: false // React already escapes values
+    },
+
+    // Namespace configuration
+    defaultNS: 'translation',
+    
+    // React-specific options
+    react: {
+      useSuspense: false // Disable suspense for class components compatibility
+    }
+  });
+
+export default i18n;