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, 33 insertions, 0 deletions

diff --git a/apps/web/lib/i18n/client.ts b/apps/web/lib/i18n/client.ts
new file mode 100644
index 00000000..1c56a88a
--- /dev/null
+++ b/apps/web/lib/i18n/client.ts
@@ -0,0 +1,33 @@
+"use client";
+
+import i18next from "i18next";
+import resourcesToBackend from "i18next-resources-to-backend";
+import {
+  initReactI18next,
+  useTranslation as useTranslationOrg,
+} from "react-i18next";
+
+import { getOptions, languages } from "./settings";
+
+const runsOnServerSide = typeof window === "undefined";
+
+i18next
+  .use(initReactI18next)
+  .use(
+    resourcesToBackend(
+      (language: string, namespace: string) =>
+        import(`./locales/${language}/${namespace}.json`),
+    ),
+  )
+  .init({
+    ...getOptions(),
+    lng: undefined, // let detect the language on client side
+    debug: false,
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+    preload: runsOnServerSide ? languages : [],
+  });
+
+export const useTranslation = useTranslationOrg;
+export const i18n = i18next;