Added: i18next logic

public/assets/locales/en/translation.json

@@ -0,0 +1,5 @@
+{
+  "app_title": "Hey there",
+  "language": "Language",
+  "welcome_message": "Welcome with translations"
+}

public/assets/locales/en/translations.json

@@ -1,5 +0,0 @@
-{
-  "app_title": "Title",
-  "language": "Language",
-  "welcome_message": "Welcome"
-}

src/App.js

@@ -1,9 +1,32 @@
+import i18next from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import HttpApi from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Test from './components/Test';
+
+i18next
+  .use(HttpApi)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    supportedLngs: ['en' /*, 'fr'*/],
+    fallbackLng: 'en',
+    debug: false,
+    // Options for language detector
+    detection: {
+      order: ['localStorage', 'sessionStorage', 'cookie', 'htmlTag'],
+      caches: ['localStorage'],
+    },
+    // react: { useSuspense: false },
+    backend: {
+      loadPath: '/assets/locales/{{lng}}/translation.json',
+    },
+  });
+
 function App() {
   return (
     <div className="App">
-      <header>
+      <Test />
-        Hey there
-      </header>
     </div>
   );
 }

src/components/Test.js

@@ -0,0 +1,11 @@
+import { useTranslation } from 'react-i18next';
+
+export default function Test() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <h3>{t('app_title')}</h3>
+      <div>{t('welcome_message')}</div>
+    </>
+  );
+}