adapt pages for next-intl

Author: pettinarip

src/hooks/useTranslation.ts

@@ -16,25 +16,31 @@ import { useTranslations } from "next-intl"
 
 const DEFAULT_NAMESPACE = "common"
 
-export default function useTranslation(namespaces?: string[] | string) {
+export function useTranslation(namespaces?: string[] | string) {
   const t = useTranslations()
 
   const customT: typeof t = (fullKey, values) => {
-    if (fullKey.includes(":")) {
-      const [namespace, key] = fullKey.split(":")
+    try {
+      if (fullKey.includes(":")) {
+        const [namespace, key] = fullKey.split(":")
 
-      if (values) {
-        return t(`${namespace}.${key}`, values)
-      }
+        if (values) {
+          return t(`${namespace}.${key}`, values)
+        }
 
-      return t.raw(`${namespace}.${key}`)
-    }
+        return t.raw(`${namespace}.${key}`)
+      }
 
-    const namespace = Array.isArray(namespaces)
-      ? namespaces[0]
-      : namespaces || DEFAULT_NAMESPACE
+      const namespace = Array.isArray(namespaces)
+        ? namespaces[0]
+        : namespaces || DEFAULT_NAMESPACE
 
-    return t.raw(`${namespace}.${fullKey}`)
+      return t.raw(`${namespace}.${fullKey}`)
+    } catch (error) {
+      // Suppress errors by default, enable if needed to debug
+      // console.error(error)
+      return fullKey
+    }
   }
 
   // keep the original methods
@@ -45,3 +51,5 @@ export default function useTranslation(namespaces?: string[] | string) {
 
   return { t: customT }
 }
+
+export default useTranslation

src/i18n/loadNamespaces.ts

@@ -1,10 +1,26 @@
+import { DEFAULT_LOCALE } from "@/lib/constants"
+
 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
+      try {
+        const defaultNamespace = (
+          await import(`../intl/${DEFAULT_LOCALE}/${namespace}.json`)
+        ).default
+        const localeNamespace = (
+          await import(`../intl/${locale}/${namespace}.json`)
+        ).default
+
+        // Merge the namespaces to have default translations for keys that are not present in the locale
+        return { ...defaultNamespace, ...localeNamespace }
+      } catch (error) {
+        // If the namespace is not found, return the default namespace
+        return (await import(`../intl/${DEFAULT_LOCALE}/${namespace}.json`))
+          .default
+      }
     })
   )
 

src/layouts/md/Roadmap.tsx

@@ -1,5 +1,3 @@
-import { useTranslation } from "next-i18next"
-
 import type { ChildOnlyProp } from "@/lib/types"
 import type { MdPageContent, RoadmapFrontmatter } from "@/lib/interfaces"
 
@@ -10,6 +8,7 @@ import RoadmapImageContent from "@/components/Roadmap/RoadmapImageContent"
 
 import { ContentLayout } from "../ContentLayout"
 
+import { useTranslation } from "@/hooks/useTranslation"
 import RoadmapHubHeroImage from "@/public/images/heroes/roadmap-hub-hero.jpg"
 
 const CardGrid = (props: ChildOnlyProp) => (

src/layouts/md/Staking.tsx

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react"
-import { useTranslation } from "next-i18next"
 
 import type { ChildOnlyProp } from "@/lib/types"
 import type { MdPageContent, StakingFrontmatter } from "@/lib/interfaces"
@@ -26,6 +25,8 @@ import UpgradeStatus from "@/components/UpgradeStatus"
 
 import { ContentLayout } from "../ContentLayout"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 const Heading1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading1 className="md:text-5xl" {...props} />
 )

src/layouts/md/Upgrade.tsx

@@ -1,5 +1,3 @@
-import { useTranslation } from "next-i18next"
-
 import type { ChildOnlyProp } from "@/lib/types"
 import type { MdPageContent, UpgradeFrontmatter } from "@/lib/interfaces"
 
@@ -14,6 +12,8 @@ import { getSummaryPoints } from "@/lib/utils/getSummaryPoints"
 
 import { ContentLayout } from "../ContentLayout"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 // Upgrade layout components
 export const upgradeComponents = {
   MergeArticleList,
@@ -42,7 +42,7 @@ export const UpgradeLayout = ({
 
   const dropdownLinks: ButtonDropdownList = {
     text: t("page-upgrades-upgrades-guide"),
-    ariaLabel: t("page-upgrades-upgrades-aria-label"),
+    ariaLabel: t("page-upgrades-index:page-upgrades-upgrades-aria-label"),
     items: [
       {
         text: t("page-upgrades-upgrades-beacon-chain"),

src/layouts/md/UseCases.tsx

@@ -1,5 +1,4 @@
 import { useRouter } from "next/router"
-import { useTranslation } from "next-i18next"
 
 import type { ChildOnlyProp } from "@/lib/types"
 import type { MdPageContent, UseCasesFrontmatter } from "@/lib/interfaces"
@@ -16,6 +15,8 @@ import { getSummaryPoints } from "@/lib/utils/getSummaryPoints"
 
 import { ContentLayout } from "../ContentLayout"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 // UseCases layout components
 export const useCasesComponents = {
   // Export empty object if none needed

src/lib/types.ts

@@ -28,7 +28,7 @@ import allQuestionData from "@/data/quizzes/questionBank"
 import { screens } from "./utils/screen"
 import { WALLETS_FILTERS_DEFAULT } from "./constants"
 
-import { layoutMapping } from "@/pages/[...slug]"
+import { layoutMapping } from "@/pages/[locale]/[...slug]"
 
 // Credit: https://stackoverflow.com/a/52331580
 export type Unpacked<T> = T extends (infer U)[] ? U : T
@@ -58,6 +58,10 @@ export type Root = {
 export type BasePageProps = SSRConfig &
   Pick<Root, "contentNotTranslated" | "lastDeployLocaleTimestamp">
 
+export type Params = {
+  locale: string
+}
+
 export type Frontmatter = RoadmapFrontmatter &
   UpgradeFrontmatter &
   StaticFrontmatter &

src/pages/404.tsx

@@ -1,5 +1,4 @@
 import type { GetStaticProps } from "next"
-import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 
 import { BasePageProps, Lang } from "@/lib/types"
 
@@ -12,7 +11,14 @@ import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getLocaleTimestamp } from "@/lib/utils/time"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
-export const getStaticProps = (async ({ locale }) => {
+import { DEFAULT_LOCALE } from "@/lib/constants"
+
+import loadNamespaces from "@/i18n/loadNamespaces"
+
+export const getStaticProps = (async () => {
+  // TODO: generate 404 pages for each locale when we finish the app router migration
+  const locale = DEFAULT_LOCALE
+
   const requiredNamespaces = getRequiredNamespacesForPage("/")
 
   // Want to check common namespace, so looking at requiredNamespaces[0]
@@ -24,9 +30,11 @@ export const getStaticProps = (async ({ locale }) => {
     lastDeployDate
   )
 
+  const messages = await loadNamespaces(locale!, requiredNamespaces)
+
   return {
     props: {
-      ...(await serverSideTranslations(locale!, requiredNamespaces)),
+      messages,
       contentNotTranslated,
       lastDeployLocaleTimestamp,
     },

src/pages/[locale]/[...slug].tsx

@@ -8,7 +8,6 @@ import type {
   InferGetStaticPropsType,
 } from "next/types"
 import type { SSRConfig } from "next-i18next"
-import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import { MDXRemote, type MDXRemoteSerializeResult } from "next-mdx-remote"
 import { serialize } from "next-mdx-remote/serialize"
 import { getPlaiceholder } from "plaiceholder"
@@ -34,11 +33,11 @@ import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getContent, getContentBySlug } from "@/lib/utils/md"
 import { getLocaleTimestamp } from "@/lib/utils/time"
 import { remapTableOfContents } from "@/lib/utils/toc"
-import {
-  filterRealLocales,
-  getRequiredNamespacesForPage,
-} from "@/lib/utils/translations"
+import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
+
+import { LOCALES_CODES } from "@/lib/constants"
 
+import loadNamespaces from "@/i18n/loadNamespaces"
 import {
   docsComponents,
   DocsLayout,
@@ -64,6 +63,7 @@ import remarkInferToc from "@/lib/rehype/remarkInferToc"
 
 interface Params extends ParsedUrlQuery {
   slug: string[]
+  locale: string
 }
 
 export const layoutMapping = {
@@ -88,17 +88,17 @@ const componentsMapping = {
   tutorial: tutorialsComponents,
 } as const
 
-export const getStaticPaths = (({ locales }) => {
+export const getStaticPaths = (() => {
   const contentFiles = getContent("/")
 
   // Generate page paths for each supported locale
-  const paths = filterRealLocales(locales).flatMap((locale) =>
+  const paths = LOCALES_CODES.flatMap((locale) =>
     contentFiles.map((file) => ({
       params: {
         // Splitting nested paths to generate proper slug
         slug: file.slug.split("/").slice(1),
+        locale,
       },
-      locale,
     }))
   )
 
@@ -120,7 +120,7 @@ const loadData = dataLoader([["gfissues", fetchGFIs]])
 
 export const getStaticProps = (async (context) => {
   const params = context.params!
-  const { locale } = context
+  const { locale } = params
 
   const markdown = getContentBySlug(`${locale}/${params.slug.join("/")}`)
   const frontmatter = markdown.frontmatter
@@ -198,9 +198,11 @@ export const getStaticProps = (async (context) => {
 
   const [gfissues] = await loadData()
 
+  const messages = await loadNamespaces(locale, requiredNamespaces)
+
   return {
     props: {
-      ...(await serverSideTranslations(locale!, requiredNamespaces)),
+      messages,
       mdxSource,
       slug,
       frontmatter,

src/pages/[locale]/assets.tsx

@@ -1,9 +1,7 @@
 import { HTMLAttributes } from "react"
 import type { GetStaticProps } from "next/types"
-import { useTranslation } from "next-i18next"
-import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 
-import type { BasePageProps, ChildOnlyProp, Lang } from "@/lib/types"
+import type { BasePageProps, ChildOnlyProp, Lang, Params } from "@/lib/types"
 
 import AssetDownload from "@/components/AssetDownload"
 import FeedbackCard from "@/components/FeedbackCard"
@@ -28,7 +26,11 @@ import { getLocaleTimestamp } from "@/lib/utils/time"
 // import leslieTheRhino from "@/public/images/upgrades/upgrade_rhino.png"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
+import { DEFAULT_LOCALE, LOCALES_CODES } from "@/lib/constants"
+
 import useColorModeValue from "@/hooks/useColorModeValue"
+import { useTranslation } from "@/hooks/useTranslation"
+import loadNamespaces from "@/i18n/loadNamespaces"
 import ethDiamondBlack from "@/public/images/assets/eth-diamond-black.png"
 import ethDiamondBlackGray from "@/public/images/assets/eth-diamond-black-gray.png"
 import ethDiamondBlackWhite from "@/public/images/assets/eth-diamond-black-white.jpg"
@@ -96,7 +98,16 @@ const H3 = (props: ChildOnlyProp) => (
   <h3 className="mb-0 mt-10 leading-xs" {...props} />
 )
 
-export const getStaticProps = (async ({ locale }) => {
+export async function getStaticPaths() {
+  return {
+    paths: LOCALES_CODES.map((locale) => ({ params: { locale } })),
+    fallback: false,
+  }
+}
+
+export const getStaticProps = (async ({ params }) => {
+  const { locale = DEFAULT_LOCALE } = params || {}
+
   const requiredNamespaces = getRequiredNamespacesForPage("assets")
 
   const contentNotTranslated = !existsNamespace(locale!, requiredNamespaces[2])
@@ -107,14 +118,16 @@ export const getStaticProps = (async ({ locale }) => {
     lastDeployDate
   )
 
+  const messages = await loadNamespaces(locale, requiredNamespaces)
+
   return {
     props: {
-      ...(await serverSideTranslations(locale!, requiredNamespaces)),
+      messages,
       contentNotTranslated,
       lastDeployLocaleTimestamp,
     },
   }
-}) satisfies GetStaticProps<BasePageProps>
+}) satisfies GetStaticProps<BasePageProps, Params>
 
 const AssetsPage = () => {
   // Ignore locale in the URL for SVG path in public directory to fix broken link