diff --git a/apps/frontend/app/i18n.ts b/apps/frontend/app/i18n.ts new file mode 100644 index 000000000..63873a665 --- /dev/null +++ b/apps/frontend/app/i18n.ts @@ -0,0 +1,47 @@ +import type { Resource } from "i18next"; +import i18n from "i18next"; +import LanguageDetector from "i18next-browser-languagedetector"; +import { initReactI18next } from "react-i18next"; + +void i18n + .use({ + type: "backend", + read( + language: string, + namespace: string, + callback: (errorValue: unknown, translations: null | Resource) => void, + ) { + import(`./${namespace}/locales/${language}.json`) + .then((resources) => { + callback(null, resources as unknown as Resource); + }) + .catch((error) => { + callback(error, null); + }); + }, + }) + .use(LanguageDetector) + .use(initReactI18next) + .init({ + fallbackLng: "en", + debug: true, + + interpolation: { + escapeValue: false, + }, + + // react i18next special options (optional) + // override if needed - omit if ok with defaults + /* + react: { + bindI18n: 'languageChanged', + bindI18nStore: '', + transEmptyNodeValue: '', + transSupportBasicHtmlNodes: true, + transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'], + useSuspense: true, + } + */ + }); + +export { i18n }; diff --git a/apps/frontend/app/layout.tsx b/apps/frontend/app/layout.tsx index c2ff57351..211635c11 100644 --- a/apps/frontend/app/layout.tsx +++ b/apps/frontend/app/layout.tsx @@ -1,3 +1,5 @@ +import { I18nextProvider } from "react-i18next"; +import { i18n } from "./i18n"; import globalFontsVariables from "@/fonts"; import { Analytics } from "@vercel/analytics/react"; import { cx } from "cva"; @@ -15,7 +17,8 @@ export default async function RootLayout({ children: React.ReactNode; }) { return ( - + +