project

src/lib/i18n/createI18nInstance.ts

@@ -0,0 +1,31 @@
+import i18next, { type i18n as I18nInstance } from "i18next";
+import { initReactI18next } from "react-i18next";
+import { buildI18nResources, LOCALE_NAMESPACES } from "./resources";
+import { DEFAULT_LANGUAGE, ENABLED_LANGUAGES, type AppLanguage } from "./registry";
+
+/**
+ * Creates a fresh, synchronously-initialized i18next instance seeded with the
+ * given language. Callers create one of these per render (see LanguageProvider),
+ * which — unlike the shared singleton in `./index` — gives every request/session
+ * its own isolated instance. This is what fixes the SSR hydration mismatch: the
+ * old shared singleton's `lng` was set once per server process (always the
+ * default language on the server, since it never re-runs per request), so every
+ * visitor's page content server-rendered in that default language and then
+ * flipped to the real language after hydration. All translations are already
+ * bundled in memory (no network fetch), so init is synchronous.
+ */
+export function createI18nInstance(lang: AppLanguage): I18nInstance {
+  const instance = i18next.createInstance();
+  instance.use(initReactI18next).init({
+    lng: lang,
+    fallbackLng: DEFAULT_LANGUAGE,
+    supportedLngs: [...ENABLED_LANGUAGES],
+    defaultNS: "common",
+    ns: [...LOCALE_NAMESPACES],
+    resources: buildI18nResources(),
+    interpolation: { escapeValue: false },
+    react: { useSuspense: false },
+    initImmediate: false,
+  });
+  return instance;
+}