feat: init rsc support for translation (#30596)

web/i18n-config/lib.client.ts

@@ -0,0 +1,10 @@
+'use client'
+
+import type { NamespaceCamelCase } from './i18next-config'
+import { useTranslation as useTranslationOriginal } from 'react-i18next'
+
+export function useTranslation(ns?: NamespaceCamelCase) {
+  return useTranslationOriginal(ns)
+}
+
+export { useLocale } from '@/context/i18n'

web/i18n-config/lib.server.ts

@@ -0,0 +1,16 @@
+import type { NamespaceCamelCase } from './i18next-config'
+import { use } from 'react'
+import { getLocaleOnServer, getTranslation } from './server'
+
+async function getI18nConfig(ns?: NamespaceCamelCase) {
+  const lang = await getLocaleOnServer()
+  return getTranslation(lang, ns)
+}
+
+export function useTranslation(ns?: NamespaceCamelCase) {
+  return use(getI18nConfig(ns))
+}
+
+export function useLocale() {
+  return use(getLocaleOnServer())
+}

web/i18n-config/server.ts

@@ -2,13 +2,13 @@ import type { i18n as I18nInstance } from 'i18next'
 import type { Locale } from '.'
 import type { NamespaceCamelCase, NamespaceKebabCase } from './i18next-config'
 import { match } from '@formatjs/intl-localematcher'
-import { camelCase, kebabCase } from 'es-toolkit/compat'
+import { kebabCase } from 'es-toolkit/compat'
 import { createInstance } from 'i18next'
 import resourcesToBackend from 'i18next-resources-to-backend'
 import Negotiator from 'negotiator'
 import { cookies, headers } from 'next/headers'
 import { initReactI18next } from 'react-i18next/initReactI18next'
-import serverOnlyContext from '@/utils/server-only-context'
+import { serverOnlyContext } from '@/utils/server-only-context'
 import { i18n } from '.'
 
 const [getLocaleCache, setLocaleCache] = serverOnlyContext<Locale | null>(null)
@@ -35,15 +35,14 @@ const getOrCreateI18next = async (lng: Locale) => {
   return instance
 }
 
-export async function getTranslation(lng: Locale, ns: NamespaceKebabCase) {
-  const camelNs = camelCase(ns) as NamespaceCamelCase
+export async function getTranslation(lng: Locale, ns?: NamespaceCamelCase) {
   const i18nextInstance = await getOrCreateI18next(lng)
 
-  if (!i18nextInstance.hasLoadedNamespace(camelNs))
-    await i18nextInstance.loadNamespaces(camelNs)
+  if (ns && !i18nextInstance.hasLoadedNamespace(ns))
+    await i18nextInstance.loadNamespaces(ns)
 
   return {
-    t: i18nextInstance.getFixedT(lng, camelNs),
+    t: i18nextInstance.getFixedT(lng, ns),
     i18n: i18nextInstance,
   }
 }