create custom abstractions for t, Translation, and load namespaces

Author: pettinarip

src/components/Translation.tsx

@@ -1,26 +1,22 @@
 import htmr, { type HtmrOptions } from "htmr"
-import type { TOptions } from "i18next"
-import { useRouter } from "next/router"
-import { useTranslation } from "next-i18next"
-
-import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
+import type { TranslationValues } from "next-intl"
 
 import TooltipLink from "./TooltipLink"
 
+import useTranslation from "@/hooks/useTranslation"
+
 type TranslationProps = {
   id: string
-  options?: TOptions
+  ns?: string
+  values?: TranslationValues
   transform?: HtmrOptions["transform"]
 }
 
 // Renders the translation string for the given translation key `id`. It
 // fallback to English if it doesn't find the given key in the current language
-const Translation = ({ id, options, transform = {} }: TranslationProps) => {
-  const { asPath } = useRouter()
-  const requiredNamespaces = getRequiredNamespacesForPage(asPath)
-
-  const { t } = useTranslation(requiredNamespaces)
-  const translatedText = t(id, options)
+const Translation = ({ id, ns, values, transform = {} }: TranslationProps) => {
+  const { t } = useTranslation(ns)
+  const translatedText = t(id, values)
 
   // Custom components mapping to be used by `htmr` when parsing the translation
   // text

src/hooks/useTranslation.ts

@@ -0,0 +1,47 @@
+import { useTranslations } from "next-intl"
+
+/**
+ * Cases to handle:
+ *
+ * - using t("key")
+ *  - & useTranslation() => "common.key"
+ *  - & useTranslation("namespace") => "namespace.key"
+ *  - & useTranslation(["namespace1", "namespace2"]) => "namespace1.key"
+ *
+ * - using t("namespace:key")
+ *  - & useTranslation("namespace") and t("namespace:key") => "namespace.key"
+ *  - & useTranslation(["namespace1", "namespace2"]) and t("namespace1:key") => "namespace1.key"
+ *  - & useTranslation(["namespace1", "namespace2"]) and t("namespace2:key") => "namespace2.key"
+ */
+
+const DEFAULT_NAMESPACE = "common"
+
+export default function useTranslation(namespaces?: string[] | string) {
+  const t = useTranslations()
+
+  const customT: typeof t = (fullKey, values) => {
+    if (fullKey.includes(":")) {
+      const [namespace, key] = fullKey.split(":")
+
+      if (values) {
+        return t(`${namespace}.${key}`, values)
+      }
+
+      return t.raw(`${namespace}.${key}`)
+    }
+
+    const namespace = Array.isArray(namespaces)
+      ? namespaces[0]
+      : namespaces || DEFAULT_NAMESPACE
+
+    return t.raw(`${namespace}.${fullKey}`)
+  }
+
+  // keep the original methods
+  customT.raw = t.raw
+  customT.rich = t.rich
+  customT.markup = t.markup
+  customT.has = t.has
+
+  return { t: customT }
+}

src/i18n/loadNamespaces.ts

@@ -0,0 +1,15 @@
+export default async function loadNamespaces(
+  locale: string,
+  namespaces: string[]
+) {
+  const byNamespace = await Promise.all(
+    namespaces.map(async (namespace) => {
+      return (await import(`../intl/${locale}/${namespace}.json`)).default
+    })
+  )
+
+  return byNamespace.reduce((acc, namespace, index) => {
+    acc[namespaces[index]] = namespace
+    return acc
+  }, {})
+}

src/i18n/request.ts

@@ -1,12 +1,20 @@
-import createMiddleware from "next-intl/middleware"
+import { getRequestConfig } from "next-intl/server"
 
-import { LOCALES_CODES } from "@/lib/constants"
+import { Lang } from "@/lib/types"
 
 import { routing } from "./routing"
 
-export default createMiddleware(routing)
+export default getRequestConfig(async ({ requestLocale }) => {
+  // This typically corresponds to the `[locale]` segment
+  let locale = await requestLocale
 
-export const config = {
-  // Match only internationalized pathnames
-  matcher: ["/", `/${LOCALES_CODES.join("|")}/:path*`],
-}
+  // Ensure that the incoming locale is valid
+  if (!locale || !routing.locales.includes(locale as Lang)) {
+    locale = routing.defaultLocale
+  }
+
+  return {
+    locale,
+    messages: (await import(`../../intl/${locale}/common.json`)).default,
+  }
+})