refactor: move useAcceptLang to lib i18n

src/app/(home)/components/Header.tsx

@@ -2,7 +2,6 @@ import { ConnectButton } from "~/components/common/ConnectButton"
 import { Logo } from "~/components/common/Logo"
 import { Image } from "~/components/ui/Image"
 import { UniLink } from "~/components/ui/UniLink"
-import { useAcceptLang } from "~/hooks/useAcceptLang"
 import { GITHUB_LINK } from "~/lib/env"
 import { useTranslation } from "~/lib/i18n"
 import { cn } from "~/lib/utils"
@@ -29,8 +28,7 @@ const tabs = [
 ]
 
 export async function Header() {
-  const lang = useAcceptLang()
-  const { t } = await useTranslation(lang, "index")
+  const { t } = await useTranslation("index")
   // const pathname = usePathname()
   // TODO how to set active state for Link in RSC,
   // make <UniLink> be client component and add activeClass props or some way else

src/app/(home)/page.tsx

@@ -1,22 +1,19 @@
 import Link from "next/link"
 import { memo } from "react"
-import { Trans } from "react-i18next/TransWithoutContext"
 
 import { Logo } from "~/components/common/Logo"
 import { Button } from "~/components/ui/Button"
 import { Image } from "~/components/ui/Image"
-import { useAcceptLang } from "~/hooks/useAcceptLang"
 import { CSB_SCAN, GITHUB_LINK } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
-import { useTranslation } from "~/lib/i18n"
+import { Trans, useTranslation } from "~/lib/i18n"
 
 import { default as OriginEntranceButton } from "./components/EntranceButton"
 import { Integration } from "./components/Integrations"
 import { ShowCase } from "./components/Showcase"
 
 async function Home() {
-  const lang = useAcceptLang()
-  const { t, i18n } = await useTranslation(lang, "index")
+  const { t, i18n } = await useTranslation("index")
 
   const EntranceButton = memo(function Button() {
     return (

src/lib/i18n/index.ts

@@ -1,7 +1,10 @@
 import { createInstance } from "i18next"
 import resourcesToBackend from "i18next-resources-to-backend"
+import { Trans as TransW } from "react-i18next/TransWithoutContext"
 import { initReactI18next } from "react-i18next/initReactI18next"
 
+import { useAcceptLang } from "~/hooks/useAcceptLang"
+
 import { getOptions } from "./settings"
 
 const initI18next = async (lng: string, ns: string) => {
@@ -19,13 +22,15 @@ const initI18next = async (lng: string, ns: string) => {
 }
 
 export async function useTranslation(
-  lng: string,
   ns: string,
   options: { keyPrefix?: string } = {},
 ) {
-  const i18nextInstance = await initI18next(lng, ns)
+  const lang = useAcceptLang()
+  const i18nextInstance = await initI18next(lang, ns)
   return {
-    t: i18nextInstance.getFixedT(lng, ns, options.keyPrefix),
+    t: i18nextInstance.getFixedT(lang, ns, options.keyPrefix),
     i18n: i18nextInstance,
   }
 }
+
+export const Trans = TransW