refactor: use await getLocale

avoid prop drilling locale

Author: wackerow

app/[locale]/layout.tsx

@@ -67,10 +67,7 @@ export default async function LocaleLayout({
             <Matomo />
           </Suspense>
 
-          <BaseLayout
-            locale={locale}
-            lastDeployLocaleTimestamp={lastDeployLocaleTimestamp}
-          >
+          <BaseLayout lastDeployLocaleTimestamp={lastDeployLocaleTimestamp}>
             {children}
           </BaseLayout>
         </Providers>

src/components/Nav/index.tsx

@@ -1,12 +1,13 @@
-import { getTranslations } from "next-intl/server"
+import { getLocale, getTranslations } from "next-intl/server"
 
 import { EthHomeIcon } from "@/components/icons"
 
 import { BaseLink } from "../ui/Link"
 
 import ClientSideNav from "./Client"
 
-const Nav = async ({ locale }) => {
+const Nav = async () => {
+  const locale = await getLocale()
   const t = await getTranslations({ locale, namespace: "common" })
 
   return (

src/components/SkipLink.tsx

@@ -1,14 +1,21 @@
+import { getLocale, getTranslations } from "next-intl/server"
+
 import { MAIN_CONTENT_ID } from "@/lib/constants"
 
 import { BaseLink } from "./ui/Link"
 
-export const SkipLink = ({ children }: { children: string }) => (
-  <div className="bg-primary-low-contrast focus-within:p-4">
-    <BaseLink
-      href={"#" + MAIN_CONTENT_ID}
-      className="absolute -top-14 rounded border bg-primary px-4 py-2 leading-8 text-background no-underline hover:no-underline focus:static"
-    >
-      {children}
-    </BaseLink>
-  </div>
-)
+export const SkipLink = async () => {
+  const locale = await getLocale()
+  const t = await getTranslations({ locale, namespace: "common" })
+
+  return (
+    <div className="bg-primary-low-contrast focus-within:p-4">
+      <BaseLink
+        href={"#" + MAIN_CONTENT_ID}
+        className="absolute -top-14 rounded border bg-primary px-4 py-2 leading-8 text-background no-underline hover:no-underline focus:static"
+      >
+        {t("skip-to-main-content")}
+      </BaseLink>
+    </div>
+  )
+}

src/layouts/BaseLayout.tsx

@@ -1,6 +1,5 @@
 // import { join } from "path"
 import dynamic from "next/dynamic"
-import { getTranslations } from "next-intl/server"
 
 import type { Root } from "@/lib/types"
 
@@ -22,9 +21,7 @@ export const BaseLayout = async ({
   // contentIsOutdated,
   // contentNotTranslated,
   lastDeployLocaleTimestamp,
-  locale,
 }: Root) => {
-  const t = await getTranslations({ locale, namespace: "common" })
   // const { locale, asPath } = useRouter()
 
   // const CONTRIBUTING = "/contributing/"
@@ -53,9 +50,9 @@ export const BaseLayout = async ({
        * The Skip Link is positioned above the container to ensure it is not affecting the
        * layout on initial load.
        */}
-      <SkipLink>{t("skip-to-main-content")}</SkipLink>
+      <SkipLink />
       <div className="mx-auto max-w-screen-2xl">
-        <Nav locale={locale} />
+        <Nav />
 
         {/* TODO: FIX TRANSLATION BANNER LOGIC FOR https://github.com/ethereum/ethereum-org-website/issues/11305 */}
         {/* <TranslationBanner

src/lib/types.ts

@@ -50,7 +50,6 @@ export type AppPropsWithLayout = AppProps & {
 export type Root = {
   children: ReactNode
   lastDeployLocaleTimestamp: string
-  locale: string
 }
 
 export type BasePageProps = Pick<Root, "lastDeployLocaleTimestamp">