Add resource backend

front/apps/mobile/app/_layout.tsx

@@ -41,6 +41,7 @@ import { getLocales } from "expo-localization";
 import { Slot } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import i18next from "i18next";
+import resourceToBackend from "i18next-resources-to-backend";
 import "intl-pluralrules";
 import { type ReactNode, useEffect, useState } from "react";
 import { initReactI18next } from "react-i18next";
@@ -49,10 +50,6 @@ import { useColorScheme } from "react-native";
 import NetInfo from "@react-native-community/netinfo";
 import { onlineManager } from "@tanstack/react-query";
 import { useTheme } from "yoshiki/native";
-// TODO: use a backend to load jsons.
-import en from "../../../translations/en.json";
-import fr from "../../../translations/fr.json";
-import zh from "../../../translations/zh.json";
 
 onlineManager.setEventListener((setOnline) => {
 	return NetInfo.addEventListener((state) => {
@@ -75,18 +72,16 @@ const clientStorage = {
 
 export const clientPersister = createSyncStoragePersister({ storage: clientStorage });
 
-i18next.use(initReactI18next).init({
-	interpolation: {
-		escapeValue: false,
-	},
-	fallbackLng: "en",
-	lng: getLocales()[0].languageCode ?? "en",
-	resources: {
-		en: { translation: en },
-		fr: { translation: fr },
-		zh: { translation: zh },
-	},
-});
+i18next
+	.use(initReactI18next)
+	.use(resourceToBackend((lang: string) => require(`../../../translations/${lang}.json`)))
+	.init({
+		interpolation: {
+			escapeValue: false,
+		},
+		fallbackLng: "en",
+		lng: getLocales()[0].languageCode ?? "en",
+	});
 
 const NavigationThemeProvider = ({ children }: { children: ReactNode }) => {
 	const theme = useTheme();

front/apps/mobile/package.json

@@ -45,6 +45,7 @@
 		"expo-status-bar": "~1.11.1",
 		"expo-updates": "~0.24.9",
 		"i18next": "^23.7.20",
+		"i18next-resources-to-backend": "^1.2.1",
 		"intl-pluralrules": "^2.0.1",
 		"moti": "^0.27.2",
 		"react": "18.2.0",

front/apps/web/package.json

@@ -2,7 +2,9 @@
 	"name": "web",
 	"version": "0.1.0",
 	"private": true,
-	"sideEffects": ["./src/polyfill.ts"],
+	"sideEffects": [
+		"./src/polyfill.ts"
+	],
 	"scripts": {
 		"dev": "next dev",
 		"build": "next build",

front/apps/web/src/i18n.tsx

@@ -23,10 +23,6 @@ import type { AppContext, AppInitialProps, AppProps } from "next/app";
 import { type ComponentType, useMemo } from "react";
 import { I18nextProvider } from "react-i18next";
 
-import en from "../../../translations/en.json";
-import fr from "../../../translations/fr.json";
-import zh from "../../../translations/zh.json";
-
 export const withTranslations = (
 	AppToTranslate: ComponentType<AppProps> & {
 		getInitialProps: (ctx: AppContext) => Promise<AppInitialProps>;
@@ -59,18 +55,10 @@ export const withTranslations = (
 	AppWithTranslations.getInitialProps = async (ctx: AppContext) => {
 		const props: AppInitialProps = await AppToTranslate.getInitialProps(ctx);
 		const lng = ctx.router.locale || ctx.router.defaultLocale || "en";
-		// TODO: use a backend to fetch only the needed translations.
-		// TODO: use a different backend on the client and fetch needed translations.
-		const resources = {
-			en: { translation: en },
-			fr: { translation: fr },
-			zh: { translation: zh },
-		};
 		await i18n.init({
 			...commonOptions,
 			lng,
 			fallbackLng: ctx.router.defaultLocale || "en",
-			resources,
 		});
 		props.pageProps.__lang = lng;
 		props.pageProps.__resources = resources;

front/package.json

@@ -14,7 +14,10 @@
 		"format": "biome format .",
 		"format:fix": "biome format . --write"
 	},
-	"workspaces": ["apps/*", "packages/*"],
+	"workspaces": [
+		"apps/*",
+		"packages/*"
+	],
 	"devDependencies": {
 		"@biomejs/biome": "1.7.3",
 		"typescript": "5.3.3"

front/yarn.lock

@@ -7828,6 +7828,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"i18next-resources-to-backend@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "i18next-resources-to-backend@npm:1.2.1"
+  dependencies:
+    "@babel/runtime": ^7.23.2
+  checksum: a2f338c4eec8d5ba09846ae1abdd23afb72086f6395d6160c748d010c82f5c28c30133f6487f0fd3a65e710231d7750b324785f15cac4baf6d24b33227840341
+  languageName: node
+  linkType: hard
+
 "i18next@npm:^23.7.20":
   version: 23.7.20
   resolution: "i18next@npm:23.7.20"
@@ -9468,6 +9477,7 @@ __metadata:
     expo-status-bar: ~1.11.1
     expo-updates: ~0.24.9
     i18next: ^23.7.20
+    i18next-resources-to-backend: ^1.2.1
     intl-pluralrules: ^2.0.1
     moti: ^0.27.2
     react: 18.2.0