feature: Add i18n support. Fixes #57 (#635)

* feature(web): Add basic scaffolding for i18n

* refactor: Switch most of the app's strings to use i18n strings

* fix: Remove unused i18next-resources-for-ts command

* Add user setting

* More translations

* Drop the german translation for now

1 files changed, 36 insertions, 0 deletions

diff --git a/apps/web/lib/i18n/server.ts b/apps/web/lib/i18n/server.ts
new file mode 100644
index 00000000..0473fd77
--- /dev/null
+++ b/apps/web/lib/i18n/server.ts
@@ -0,0 +1,36 @@
+import { getUserLocalSettings } from "@/lib/userLocalSettings/userLocalSettings";
+import { createInstance, FlatNamespace, KeyPrefix } from "i18next";
+import resourcesToBackend from "i18next-resources-to-backend";
+import { FallbackNs } from "react-i18next";
+import { initReactI18next } from "react-i18next/initReactI18next";
+
+import { getOptions } from "./settings";
+
+const initI18next = async (lng: string, ns: string | string[]) => {
+  const i18nInstance = createInstance();
+  await i18nInstance
+    .use(initReactI18next)
+    .use(
+      resourcesToBackend(
+        (language: string, namespace: string) =>
+          import(`./locales/${language}/${namespace}.json`),
+      ),
+    )
+    .init(getOptions(lng, ns?.toString()));
+  return i18nInstance;
+};
+
+export async function useTranslation<
+  Ns extends FlatNamespace,
+  KPrefix extends KeyPrefix<FallbackNs<Ns>> = undefined,
+>(ns?: Ns, options: { keyPrefix?: KPrefix } = {}) {
+  const lng = (await getUserLocalSettings()).lang;
+  const i18nextInstance = await initI18next(
+    lng,
+    Array.isArray(ns) ? (ns as string[]) : (ns as string),
+  );
+  return {
+    t: i18nextInstance.getFixedT(lng, ns as FlatNamespace, options.keyPrefix),
+    i18n: i18nextInstance,
+  };
+}