[web] Bundle translations but load them lazily

Refs:
- https://github.com/i18next/i18next-resources-to-backend
- https://stackoverflow.com/questions/77251750/how-to-implement-lazy-loading-translations-in-i18next-with-react
- https://github.com/i18next/react-i18next/issues/525
- https://gist.github.com/SimeonC/6a738467c691eef7f21ebf96918cd95f
- https://www.i18next.com/overview/plugins-and-utils

web/packages/next/i18n.ts

@@ -3,7 +3,7 @@ import { logError } from "@/utils/logging";
 import { includes } from "@/utils/type-guards";
 import { getUserLocales } from "get-user-locale";
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import resourcesToBackend from "i18next-resources-to-backend";
 import { initReactI18next } from "react-i18next";
 import { object, string } from "yup";
 
@@ -55,7 +55,15 @@ export const setupI18n = async () => {
     await i18n
         // i18next-http-backend: Asynchronously loads translations over HTTP
         // https://github.com/i18next/i18next-http-backend
-        .use(Backend)
+        // .use(Backend)
+        .use(
+            resourcesToBackend(
+                (language: string, namespace: string) =>
+                    import(
+                        `../../apps/photos/public/locales/${language}/${namespace}.json`
+                    ),
+            ),
+        )
         // react-i18next: React support
         // Pass the i18n instance to react-i18next.
         .use(initReactI18next)

web/packages/next/package.json

@@ -10,6 +10,7 @@
         "get-user-locale": "^2.3",
         "i18next": "^23.10",
         "i18next-http-backend": "^2.5",
+        "i18next-resources-to-backend": "^1.2.0",
         "next": "^14.1",
         "react": "^18",
         "react-dom": "^18",

web/yarn.lock

@@ -3002,6 +3002,13 @@ i18next-http-backend@^2.5:
   dependencies:
     cross-fetch "4.0.0"
 
+i18next-resources-to-backend@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/i18next-resources-to-backend/-/i18next-resources-to-backend-1.2.0.tgz#4e0ea0c093bf1acb3eb47972a3002b84a1fec3b2"
+  integrity sha512-8f1l03s+QxDmCfpSXCh9V+AFcxAwIp0UaroWuyOx+hmmv8484GcELHs+lnu54FrNij8cDBEXvEwhzZoXsKcVpg==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
 i18next@^23.10:
   version "23.10.0"
   resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.10.0.tgz#fb328794ae692e6fdde0564259e421f4203c4a2c"
@@ -3454,7 +3461,7 @@ libsodium-wrappers@0.7.9:
   dependencies:
     libsodium "^0.7.0"
 
-libsodium@0.7.9, libsodium@^0.7.0:
+libsodium@^0.7.0:
   version "0.7.9"
   resolved "https://registry.yarnpkg.com/libsodium/-/libsodium-0.7.9.tgz#4bb7bcbf662ddd920d8795c227ae25bbbfa3821b"
   integrity sha512-gfeADtR4D/CM0oRUviKBViMGXZDgnFdMKMzHsvBdqLBHd9ySi6EtYnmuhHVDDYgYpAO8eU8hEY+F8vIUAPh08A==