feat: language browser detection

src/i18n/index.ts

@@ -1,6 +1,7 @@
 import i18n, { Namespace, ParseKeys } from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
 
 export const validNamespaces = [
   'string',
@@ -24,15 +25,20 @@ export type FullI18nKey = {
 
 i18n
   .use(Backend)
+  .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-    lng: localStorage.getItem('lang') || 'en',
+    supportedLngs: ['en', 'de', 'es', 'fr', 'pt', 'ja', 'hi', 'nl', 'ru', 'zh'],
     fallbackLng: 'en',
     interpolation: {
       escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
     },
     backend: {
       loadPath: '/locales/{{lng}}/{{ns}}.json'
+    },
+    detection: {
+      lookupLocalStorage: 'lang',
+      caches: ['localStorage'] // cache the detected lang back to localStorage
     }
   });