feat: client side i18n

package.json

@@ -72,6 +72,7 @@
     "hast-util-to-html": "^8.0.4",
     "hast-util-to-text": "^3.1.2",
     "i18next": "^22.4.15",
+    "i18next-browser-languagedetector": "^7.0.1",
     "i18next-resources-to-backend": "^1.1.3",
     "idb-keyval": "6.2.1",
     "immer": "10.0.1",

pnpm-lock.yaml

@@ -136,6 +136,9 @@ dependencies:
   i18next:
     specifier: ^22.4.15
     version: 22.4.15
+  i18next-browser-languagedetector:
+    specifier: ^7.0.1
+    version: 7.0.1
   i18next-resources-to-backend:
     specifier: ^1.1.3
     version: 1.1.3
@@ -9075,6 +9078,12 @@ packages:
     hasBin: true
     dev: true
 
+  /i18next-browser-languagedetector@7.0.1:
+    resolution: {integrity: sha512-Pa5kFwaczXJAeHE56CHG2aWzFBMJNUNghf0Pm4SwSrEMps/PTKqW90EYWlIvhuYStf3Sn1K0vw+gH3+TLdkH1g==}
+    dependencies:
+      '@babel/runtime': 7.21.5
+    dev: false
+
   /i18next-fs-backend@2.1.1:
     resolution: {integrity: sha512-FTnj+UmNgT3YRml5ruRv0jMZDG7odOL/OP5PF5mOqvXud2vHrPOOs68Zdk6iqzL47cnnM0ZVkK2BAvpFeDJToA==}
     dev: false

src/app/(home)/page.tsx

@@ -4,9 +4,9 @@ import { memo } from "react"
 import { Hydrate, dehydrate } from "@tanstack/react-query"
 
 import { Logo } from "~/components/common/Logo"
-import { ShowCase } from "~/components/home//Showcase"
 import { default as OriginEntranceButton } from "~/components/home/EntranceButton"
 import { Integration } from "~/components/home/Integrations"
+import { ShowCase } from "~/components/home/Showcase"
 import { Button } from "~/components/ui/Button"
 import { Image } from "~/components/ui/Image"
 import { CSB_SCAN, GITHUB_LINK } from "~/lib/env"

src/components/common/ConnectButton.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import { useTranslation } from "next-i18next"
 import React, { useEffect, useState } from "react"
 
 import {
@@ -33,6 +32,7 @@ import { Button, type Variant, type VariantColor } from "~/components/ui/Button"
 import { Menu } from "~/components/ui/Menu"
 import { SITE_URL } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
+import { useTranslation } from "~/lib/i18n/client"
 import { cn } from "~/lib/utils"
 
 type HeaderLinkType = {

src/lib/i18n/client.ts

@@ -0,0 +1,32 @@
+"use client"
+
+import i18next from "i18next"
+import LanguageDetector from "i18next-browser-languagedetector"
+import resourcesToBackend from "i18next-resources-to-backend"
+import {
+  initReactI18next,
+  useTranslation as useTranslationOrg,
+} from "react-i18next"
+
+import { getOptions } from "./settings"
+
+i18next
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .use(
+    resourcesToBackend(
+      (language: string, namespace: string) =>
+        import(`./locales/${language}/${namespace}.json`),
+    ),
+  )
+  .init({
+    ...getOptions(),
+    lng: undefined, // let detect the language on client side
+    detection: {
+      order: ["htmlTag"],
+    },
+  })
+
+export function useTranslation(ns: string) {
+  return useTranslationOrg(ns)
+}

src/lib/i18n/index.ts

@@ -21,14 +21,11 @@ const initI18next = async (lng: string, ns: string) => {
   return i18nInstance
 }
 
-export async function useTranslation(
-  ns: string,
-  options: { keyPrefix?: string } = {},
-) {
+export async function useTranslation(ns: string) {
   const lang = useAcceptLang()
   const i18nextInstance = await initI18next(lang, ns)
   return {
-    t: i18nextInstance.getFixedT(lang, ns, options.keyPrefix),
+    t: i18nextInstance.getFixedT(lang, ns),
     i18n: i18nextInstance,
   }
 }