Merged in feature/refactor-lang (pull request #387)

feat: SW-238 Avoid prop drilling of lang

Approved-by: Michael Zetterberg

app/[lang]/(live)/(protected)/layout.tsx

@@ -5,13 +5,11 @@ import { overview } from "@/constants/routes/myPages"
 import { serverClient } from "@/lib/trpc/server"
 
 import { auth } from "@/auth"
-
-import type { LangParams, LayoutArgs } from "@/types/params"
+import { getLang } from "@/i18n/serverContext"
 
 export default async function ProtectedLayout({
   children,
-  params,
-}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+}: React.PropsWithChildren) {
   const session = await auth()
   /**
    *  Fallback to make sure every route nested in the
@@ -19,16 +17,16 @@ export default async function ProtectedLayout({
    */
   const h = headers()
   const redirectTo = encodeURIComponent(
-    h.get("x-url") ?? h.get("x-pathname") ?? overview[params.lang]
+    h.get("x-url") ?? h.get("x-pathname") ?? overview[getLang()]
   )
 
   if (!session) {
-    redirect(`/${params.lang}/login?redirectTo=${redirectTo}`)
+    redirect(`/${getLang()}/login?redirectTo=${redirectTo}`)
   }
 
   const user = await serverClient().user.get()
   if (!user || "error" in user) {
-    redirect(`/${params.lang}/login?redirectTo=${redirectTo}`)
+    redirect(`/${getLang()}/login?redirectTo=${redirectTo}`)
   }
 
   return children

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx

@@ -1,5 +1,10 @@
 import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
+import { setLang } from "@/i18n/serverContext"
+
+import { LangParams, PageArgs } from "@/types/params"
+
+export default function AllBreadcrumbs({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
 
-export default function AllBreadcrumbs() {
   return <Breadcrumbs />
 }

app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx

@@ -4,6 +4,7 @@ import Content from "@/components/MyPages/AccountPage/Content"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
+import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
@@ -12,6 +13,8 @@ import type { LangParams, PageArgs } from "@/types/params"
 export default async function MyPages({
   params,
 }: PageArgs<LangParams & { path: string[] }>) {
+  setLang(params.lang)
+
   const accountPageRes = await serverClient().contentstack.accountPage.get()
   const { formatMessage } = await getIntl()
 
@@ -26,7 +29,7 @@ export default async function MyPages({
       <main className={styles.blocks}>
         <Title>{accountPage.heading}</Title>
         {accountPage.content.length ? (
-          <Content lang={params.lang} content={accountPage.content} />
+          <Content content={accountPage.content} />
         ) : (
           <p>{formatMessage({ id: "No content published" })}</p>
         )}

app/[lang]/(live)/(protected)/my-pages/layout.tsx

@@ -2,20 +2,17 @@ import Sidebar from "@/components/MyPages/Sidebar"
 
 import styles from "./layout.module.css"
 
-import { LangParams, LayoutArgs } from "@/types/params"
-
 export default async function MyPagesLayout({
   breadcrumbs,
   children,
-  params,
-}: React.PropsWithChildren<LayoutArgs<LangParams>> & {
+}: React.PropsWithChildren & {
   breadcrumbs: React.ReactNode
 }) {
   return (
     <section className={styles.layout}>
       {breadcrumbs}
       <section className={styles.content}>
-        <Sidebar lang={params.lang} />
+        <Sidebar />
         {children}
       </section>
     </section>

app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx

@@ -3,10 +3,17 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
+import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
-export default async function CommunicationSlot() {
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function CommunicationSlot({
+  params,
+}: PageArgs<LangParams>) {
+  setLang(params.lang)
+
   const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>

app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx

@@ -7,10 +7,14 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
+import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
-export default async function CreditCardSlot() {
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function CreditCardSlot({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
   const { formatMessage } = await getIntl()
   const creditCards = await serverClient().user.creditCards()
 

app/[lang]/(live)/(protected)/my-pages/profile/@membershipCards/page.tsx

@@ -5,10 +5,16 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
+import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
-export default async function MembershipCardSlot() {
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function MembershipCardSlot({
+  params,
+}: PageArgs<LangParams>) {
+  setLang(params.lang)
   const { formatMessage } = await getIntl()
   const membershipCards = await serverClient().user.membershipCards()
 

app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/page.tsx

@@ -1,8 +1,15 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import Form from "@/components/Forms/Edit/Profile"
+import { setLang } from "@/i18n/serverContext"
+
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function EditProfileSlot({
+  params,
+}: PageArgs<LangParams>) {
+  setLang(params.lang)
 
-export default async function EditProfileSlot() {
   const user = await serverClient().user.get({ mask: false })
   if (!user || "error" in user) {
     return null

app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx

@@ -16,12 +16,14 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getLang, setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
-import type { LangParams, PageArgs } from "@/types/params"
+import { LangParams, PageArgs } from "@/types/params"
 
 export default async function Profile({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
   const { formatMessage } = await getIntl()
   const user = await serverClient().user.get()
   if (!user || "error" in user) {
@@ -40,7 +42,7 @@ export default async function Profile({ params }: PageArgs<LangParams>) {
           </Title>
         </hgroup>
         <Button asChild intent="primary" size="small" theme="base">
-          <Link color="none" href={profileEdit[params.lang]}>
+          <Link color="none" href={profileEdit[getLang()]}>
             {formatMessage({ id: "Edit profile" })}
           </Link>
         </Button>

app/[lang]/(live)/(protected)/my-pages/profile/page.tsx

@@ -3,8 +3,12 @@ import "./profileLayout.css"
 import { serverClient } from "@/lib/trpc/server"
 
 import TrackingSDK from "@/components/TrackingSDK"
+import { setLang } from "@/i18n/serverContext"
 
-export default async function ProfilePage() {
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function ProfilePage({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
   const accountPage = await serverClient().contentstack.accountPage.get()
 
   if (!accountPage) {

app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx

@@ -1,5 +1,10 @@
 import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
+import { setLang } from "@/i18n/serverContext"
+
+import { LangParams, PageArgs } from "@/types/params"
+
+export default function PageBreadcrumbs({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
 
-export default function PageBreadcrumbs() {
   return <Breadcrumbs />
 }

app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx

@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import ContentPage from "@/components/ContentType/ContentPage"
 import HotelPage from "@/components/ContentType/HotelPage/HotelPage"
 import LoyaltyPage from "@/components/ContentType/LoyaltyPage/LoyaltyPage"
+import { setLang } from "@/i18n/serverContext"
 
 import {
   ContentTypeParams,
@@ -14,13 +15,15 @@ import {
 export default async function ContentTypePage({
   params,
 }: PageArgs<LangParams & ContentTypeParams & UIDParams, {}>) {
+  setLang(params.lang)
+
   switch (params.contentType) {
     case "content-page":
       return <ContentPage />
     case "loyalty-page":
-      return <LoyaltyPage lang={params.lang} />
+      return <LoyaltyPage />
     case "hotel-page":
-      return <HotelPage lang={params.lang} />
+      return <HotelPage />
     default:
       const type: never = params.contentType
       console.error(`Unsupported content type given: ${type}`)

app/[lang]/(live)/(public)/hotelreservation/page.tsx

@@ -1,5 +1,9 @@
+import { setLang } from "@/i18n/serverContext"
+
 import { LangParams, PageArgs } from "@/types/params"
 
 export default function HotelReservationPage({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
+
   return null
 }

app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx

@@ -6,6 +6,7 @@ import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
+import { getLang, setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
@@ -15,10 +16,11 @@ export default async function SelectHotelPage({
   params,
 }: PageArgs<LangParams>) {
   const intl = await getIntl()
+  setLang(params.lang)
 
   const { attributes } = await serverClient().hotel.getHotel({
     hotelId: "d98c7ab1-ebaa-4102-b351-758daf1ddf55",
-    language: params.lang,
+    language: getLang(),
   })
   const hotels = [attributes]
 

app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx

@@ -5,16 +5,19 @@ import BedSelection from "@/components/HotelReservation/SelectRate/BedSelection"
 import BreakfastSelection from "@/components/HotelReservation/SelectRate/BreakfastSelection"
 import FlexibilitySelection from "@/components/HotelReservation/SelectRate/FlexibilitySelection"
 import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
+import { getLang, setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
 import { LangParams, PageArgs } from "@/types/params"
 
 export default async function SelectRate({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
+
   // TODO: pass the correct hotel ID
   const { attributes: hotel } = await serverClient().hotel.getHotel({
     hotelId: "d98c7ab1-ebaa-4102-b351-758daf1ddf55",
-    language: params.lang,
+    language: getLang(),
   })
   const rooms = await serverClient().hotel.getRates({
     // TODO: pass the correct hotel ID and all other parameters that should be included in the search

app/[lang]/(live)/@header/[...paths]/@languageSwitcher/error.tsx

@@ -1,14 +1,9 @@
 "use client"
 
-import { useParams } from "next/navigation"
-
 import { baseUrls } from "@/constants/routes/baseUrls"
 
 import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
 
-import { LangParams } from "@/types/params"
-
 export default function Error() {
-  const params = useParams<LangParams>()
-  return <LanguageSwitcher urls={baseUrls} lang={params.lang} />
+  return <LanguageSwitcher urls={baseUrls} />
 }

app/[lang]/(live)/@header/[...paths]/@languageSwitcher/page.tsx

@@ -1,11 +1,18 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
+import { setLang } from "@/i18n/serverContext"
+
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function LanguageSwitcherRoute({
+  params,
+}: PageArgs<LangParams>) {
+  setLang(params.lang)
 
-export default async function LanguageSwitcherRoute() {
   const data = await serverClient().contentstack.languageSwitcher.get()
   if (!data) {
     return null
   }
-  return <LanguageSwitcher urls={data.urls} lang={data.lang} />
+  return <LanguageSwitcher urls={data.urls} />
 }

app/[lang]/(live)/@header/[...paths]/@myPagesMobileDropdown/page.tsx

@@ -1,13 +1,15 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown"
+import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"
 
 export default async function MyPagesMobileDropdownPage({
   params,
 }: PageArgs<LangParams>) {
+  setLang(params.lang)
   const navigation = await serverClient().contentstack.myPages.navigation.get()
   if (!navigation) return null
-  return <MyPagesMobileDropdown navigation={navigation} lang={params.lang} />
+  return <MyPagesMobileDropdown navigation={navigation} />
 }

app/[lang]/(live)/@header/[...paths]/layout.tsx

@@ -1,17 +1,13 @@
 import Header from "@/components/Current/Header"
 
-import { LangParams, PageArgs } from "@/types/params"
-
 export default function HeaderLayout({
-  params,
   languageSwitcher,
   myPagesMobileDropdown,
-}: PageArgs<LangParams> & {
+}: {
   languageSwitcher: React.ReactNode
 } & { myPagesMobileDropdown: React.ReactNode }) {
   return (
     <Header
-      lang={params.lang}
       myPagesMobileDropdown={myPagesMobileDropdown}
       languageSwitcher={languageSwitcher}
     />

app/[lang]/(live)/@header/page.tsx

@@ -4,18 +4,18 @@ import { serverClient } from "@/lib/trpc/server"
 import Header from "@/components/Current/Header"
 import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
 import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown"
+import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"
 
 export default async function HeaderPage({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
+
   const navigation = await serverClient().contentstack.myPages.navigation.get()
   return (
     <Header
-      lang={params.lang}
-      myPagesMobileDropdown={
-        <MyPagesMobileDropdown navigation={navigation} lang={params.lang} />
-      }
-      languageSwitcher={<LanguageSwitcher urls={baseUrls} lang={params.lang} />}
+      myPagesMobileDropdown={<MyPagesMobileDropdown navigation={navigation} />}
+      languageSwitcher={<LanguageSwitcher urls={baseUrls} />}
     />
   )
 }

app/[lang]/(live)/layout.tsx

@@ -11,6 +11,7 @@ import VwoScript from "@/components/Current/VwoScript"
 import { preloadUserTracking } from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
 import ServerIntlProvider from "@/i18n/Provider"
+import { getLang, setLang } from "@/i18n/serverContext"
 
 import type { Metadata } from "next"
 
@@ -30,11 +31,12 @@ export default async function RootLayout({
     header: React.ReactNode
   }
 >) {
+  setLang(params.lang)
   preloadUserTracking()
 
   const { defaultLocale, locale, messages } = await getIntl()
   return (
-    <html lang={params.lang}>
+    <html lang={getLang()}>
       <head>
         <AdobeSDKScript />
         <Script data-cookieconsent="ignore" src="/_static/js/cookie-bot.js" />
@@ -53,10 +55,10 @@ export default async function RootLayout({
       </head>
       <body>
         <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
-          <TrpcProvider lang={params.lang}>
+          <TrpcProvider>
             {header}
             {children}
-            <Footer lang={params.lang} />
+            <Footer />
           </TrpcProvider>
         </ServerIntlProvider>
       </body>

app/[lang]/(live)/middleware-error/404/page.tsx

@@ -1,11 +1,10 @@
-import { Lang } from "@/constants/languages"
-
 import NotFound from "@/components/Current/NotFound"
+import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"
 
 export default function NotFoundPage({ params }: PageArgs<LangParams>) {
-  const lang = params.lang || Lang.en
+  setLang(params.lang)
 
-  return <NotFound lang={lang} />
+  return <NotFound />
 }

app/[lang]/(live)/middleware-error/[status]/page.tsx

@@ -1,3 +1,5 @@
+import { getLang, setLang } from "@/i18n/serverContext"
+
 import styles from "./page.module.css"
 
 import { LangParams, LayoutArgs, StatusParams } from "@/types/params"
@@ -5,9 +7,11 @@ import { LangParams, LayoutArgs, StatusParams } from "@/types/params"
 export default function MiddlewareError({
   params,
 }: LayoutArgs<LangParams & StatusParams>) {
+  setLang(params.lang)
+
   return (
     <div className={styles.layout}>
-      Middleware Error {params.lang}: {params.status}
+      Middleware Error {getLang()}: {params.status}
     </div>
   )
 }

app/[lang]/(live)/not-found.tsx

@@ -1,6 +1,10 @@
 import { getIntl } from "@/i18n"
+import { setLang } from "@/i18n/serverContext"
 
-export default async function NotFound() {
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function NotFound({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
   const { formatMessage } = await getIntl()
   return (
     <main>

app/[lang]/(live-current)/@languageSwitcher/current-content-page/page.tsx

@@ -1,11 +1,18 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
+import { setLang } from "@/i18n/serverContext"
+
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function LanguageSwitcherRoute({
+  params,
+}: PageArgs<LangParams>) {
+  setLang(params.lang)
 
-export default async function LanguageSwitcherRoute() {
   const data = await serverClient().contentstack.languageSwitcher.get()
   if (!data) {
     return null
   }
-  return <LanguageSwitcher urls={data.urls} lang={data.lang} />
+  return <LanguageSwitcher urls={data.urls} />
 }

app/[lang]/(live-current)/@languageSwitcher/error.tsx

@@ -1,14 +1,9 @@
 "use client"
 
-import { useParams } from "next/navigation"
-
 import { baseUrls } from "@/constants/routes/baseUrls"
 
 import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
 
-import { LangParams } from "@/types/params"
-
 export default function Error() {
-  const params = useParams<LangParams>()
-  return <LanguageSwitcher urls={baseUrls} lang={params.lang} />
+  return <LanguageSwitcher urls={baseUrls} />
 }

app/[lang]/(live-current)/@myPagesMobileDropdown/current-content-page/page.tsx

@@ -1,15 +1,18 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown"
+import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"
 
 export default async function MyPagesMobileDropdownPage({
   params,
 }: PageArgs<LangParams>) {
+  setLang(params.lang)
+
   const navigation = await serverClient().contentstack.myPages.navigation.get()
   if (!navigation) {
     return null
   }
-  return <MyPagesMobileDropdown navigation={navigation} lang={params.lang} />
+  return <MyPagesMobileDropdown navigation={navigation} />
 }

app/[lang]/(live-current)/@myPagesMobileDropdown/error.tsx

@@ -1,12 +1,7 @@
 "use client"
 
-import { useParams } from "next/navigation"
-
 import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown"
 
-import { LangParams } from "@/types/params"
-
 export default function Error() {
-  const params = useParams<LangParams>()
-  return <MyPagesMobileDropdown navigation={null} lang={params.lang} />
+  return <MyPagesMobileDropdown navigation={null} />
 }

app/[lang]/(live-current)/current-content-page/page.tsx

@@ -6,6 +6,7 @@ import { request } from "@/lib/graphql/request"
 
 import ContentPage from "@/components/Current/ContentPage"
 import Tracking from "@/components/Current/Tracking"
+import { getLang, setLang } from "@/i18n/serverContext"
 
 import type { LangParams, PageArgs, UriParams } from "@/types/params"
 import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage"
@@ -15,6 +16,8 @@ export default async function CurrentContentPage({
   params,
   searchParams,
 }: PageArgs<LangParams, UriParams>) {
+  setLang(params.lang)
+
   try {
     if (!searchParams.uri) {
       throw new Error("Bad URI")
@@ -23,10 +26,10 @@ export default async function CurrentContentPage({
     const response = await request<GetCurrentBlockPageData>(
       GetCurrentBlockPage,
       {
-        locale: params.lang,
+        locale: getLang(),
         url: searchParams.uri,
       },
-      { tags: [`${searchParams.uri}-${params.lang}`] }
+      { tags: [`${searchParams.uri}-${getLang()}`] }
     )
 
     if (!response.data?.all_current_blocks_page?.total) {
@@ -46,7 +49,7 @@ export default async function CurrentContentPage({
     const pageData = response.data.all_current_blocks_page.items[0]
 
     const trackingData = {
-      lang: params.lang,
+      lang: getLang(),
       publishedDate: pageData.system.updated_at,
       createdDate: pageData.system.created_at,
       pageId: pageData.system.uid,

app/[lang]/(live-current)/layout.tsx

@@ -10,6 +10,7 @@ import LangPopup from "@/components/Current/LangPopup"
 import SkipToMainContent from "@/components/SkipToMainContent"
 import { getIntl } from "@/i18n"
 import ServerIntlProvider from "@/i18n/Provider"
+import { getLang, setLang } from "@/i18n/serverContext"
 
 import type { Metadata } from "next"
 
@@ -31,9 +32,11 @@ export default async function RootLayout({
     myPagesMobileDropdown: React.ReactNode
   }
 >) {
+  setLang(params.lang)
   const { defaultLocale, locale, messages } = await getIntl()
+
   return (
-    <html lang={params.lang}>
+    <html lang={getLang()}>
       <head>
         {/* eslint-disable-next-line @next/next/no-css-tags */}
         <link rel="stylesheet" href="/_static/css/core.css" />
@@ -44,7 +47,7 @@ export default async function RootLayout({
           strategy="beforeInteractive"
           data-blockingmode="auto"
           data-cbid="6d539de8-3e67-4f0f-a0df-8cef9070f712"
-          data-culture={params.lang}
+          data-culture={getLang()}
           id="Cookiebot"
           src="https://consent.cookiebot.com/uc.js"
         />
@@ -60,16 +63,15 @@ export default async function RootLayout({
         />
       </head>
       <body className="theme-00Corecolours theme-X0Oldcorecolours">
-        <LangPopup lang={params.lang} />
+        <LangPopup />
         <SkipToMainContent />
         <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
           <Header
-            lang={params.lang}
             myPagesMobileDropdown={myPagesMobileDropdown}
             languageSwitcher={languageSwitcher}
           />
           {children}
-          <Footer lang={params.lang} />
+          <Footer />
         </ServerIntlProvider>
         <Script id="page-tracking">{`
           typeof _satellite !== "undefined" && _satellite.pageBottom();

app/[lang]/(live-current)/not-found.tsx

@@ -1,13 +1,5 @@
-"use client"
-
-import { useParams } from "next/navigation"
-
 import NotFound from "@/components/Current/NotFound"
 
-import { LangParams } from "@/types/params"
-
 export default function NotFoundPage() {
-  const { lang } = useParams<LangParams>()
-
-  return <NotFound lang={lang} />
+  return <NotFound />
 }

app/[lang]/(preview)/layout.tsx

@@ -1,4 +1,5 @@
 import InitLivePreview from "@/components/Current/LivePreview"
+import { getLang, setLang } from "@/i18n/serverContext"
 
 import type { Metadata } from "next"
 
@@ -13,8 +14,10 @@ export default function RootLayout({
   children,
   params,
 }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  setLang(params.lang)
+
   return (
-    <html lang={params.lang}>
+    <html lang={getLang()}>
       <body>
         <InitLivePreview />
         {children}

app/[lang]/(preview)/preview/[contentType]/[uid]/page.tsx

@@ -1,3 +1,5 @@
+import { getLang, setLang } from "@/i18n/serverContext"
+
 import {
   ContentTypeParams,
   LangParams,
@@ -9,11 +11,13 @@ export default async function PreviewPage({
   params,
   searchParams,
 }: PageArgs<LangParams & ContentTypeParams & UIDParams, {}>) {
+  setLang(params.lang)
+
   return (
     <div>
       <p>
-        Preview for {params.contentType}:{params.uid} in {params.lang} with
-        params <pre>{JSON.stringify(searchParams, null, 2)}</pre> goes here
+        Preview for {params.contentType}:{params.uid} in {getLang()} with params{" "}
+        <pre>{JSON.stringify(searchParams, null, 2)}</pre> goes here
       </p>
     </div>
   )

app/[lang]/(preview-current)/layout.tsx

@@ -4,6 +4,7 @@ import Footer from "@/components/Current/Footer"
 import LangPopup from "@/components/Current/LangPopup"
 import InitLivePreview from "@/components/Current/LivePreview"
 import SkipToMainContent from "@/components/SkipToMainContent"
+import { getLang, setLang } from "@/i18n/serverContext"
 
 import type { Metadata } from "next"
 
@@ -20,8 +21,10 @@ export default function RootLayout({
   children,
   params,
 }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  setLang(params.lang)
+
   return (
-    <html lang={params.lang}>
+    <html lang={getLang()}>
       <head>
         {/* eslint-disable-next-line @next/next/no-css-tags */}
         <link rel="stylesheet" href="/_static/css/core.css" />
@@ -30,10 +33,10 @@ export default function RootLayout({
       </head>
       <body>
         <InitLivePreview />
-        <LangPopup lang={params.lang} />
+        <LangPopup />
         <SkipToMainContent />
         {children}
-        <Footer lang={params.lang} />
+        <Footer />
       </body>
     </html>
   )

app/[lang]/(preview-current)/preview-current/page.tsx

@@ -5,14 +5,18 @@ import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphq
 
 import ContentPage from "@/components/Current/ContentPage"
 import LoadingSpinner from "@/components/Current/LoadingSpinner"
+import { getLang, setLang } from "@/i18n/serverContext"
 
-import type { LangParams, PageArgs, PreviewParams } from "@/types/params"
+import type { PageArgs, PreviewParams } from "@/types/params"
+import { LangParams } from "@/types/params"
 import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage"
 
 export default async function CurrentPreviewPage({
   params,
   searchParams,
 }: PageArgs<LangParams, PreviewParams>) {
+  setLang(params.lang)
+
   try {
     ContentstackLivePreview.setConfigFromParams(searchParams)
 
@@ -22,7 +26,7 @@ export default async function CurrentPreviewPage({
 
     const response = await previewRequest<GetCurrentBlockPageData>(
       GetCurrentBlockPage,
-      { locale: params.lang, url: searchParams.uri }
+      { locale: getLang(), url: searchParams.uri }
     )
 
     if (!response.data?.all_current_blocks_page?.total) {

app/[lang]/webview/[contentType]/[uid]/page.tsx

@@ -4,6 +4,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import AccountPage from "@/components/ContentType/Webviews/AccountPage"
 import LoyaltyPage from "@/components/ContentType/Webviews/LoyaltyPage"
+import { getLang, setLang } from "@/i18n/serverContext"
 
 import {
   ContentTypeWebviewParams,
@@ -15,6 +16,7 @@ import {
 export default async function ContentTypePage({
   params,
 }: PageArgs<LangParams & ContentTypeWebviewParams & UIDParams, {}>) {
+  setLang(params.lang)
   const user = await serverClient().user.get()
 
   if (!user) {
@@ -26,15 +28,15 @@ export default async function ContentTypePage({
       case "unauthorized": // fall through
       case "forbidden": // fall through
       case "token_expired":
-        redirect(`/${params.lang}/webview/refresh`)
+        redirect(`/${getLang()}/webview/refresh`)
     }
   }
 
   switch (params.contentType) {
     case "loyalty-page":
-      return <LoyaltyPage lang={params.lang} />
+      return <LoyaltyPage />
     case "account-page":
-      return <AccountPage lang={params.lang} />
+      return <AccountPage />
     default:
       const type: never = params.contentType
       console.error(`Unsupported content type given: ${type}`)

app/[lang]/webview/layout.tsx

@@ -8,6 +8,7 @@ import TrpcProvider from "@/lib/trpc/Provider"
 import AdobeSDKScript from "@/components/Current/AdobeSDKScript"
 import { getIntl } from "@/i18n"
 import ServerIntlProvider from "@/i18n/Provider"
+import { getLang, setLang } from "@/i18n/serverContext"
 
 import styles from "./layout.module.css"
 
@@ -23,9 +24,11 @@ export default async function RootLayout({
   children,
   params,
 }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  setLang(params.lang)
   const { defaultLocale, locale, messages } = await getIntl()
+
   return (
-    <html lang={params.lang}>
+    <html lang={getLang()}>
       <head>
         <AdobeSDKScript />
         <Script id="ensure-adobeDataLayer">{`
@@ -34,7 +37,7 @@ export default async function RootLayout({
       </head>
       <body className={styles.layout}>
         <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
-          <TrpcProvider lang={params.lang}>{children}</TrpcProvider>
+          <TrpcProvider>{children}</TrpcProvider>
         </ServerIntlProvider>
       </body>
     </html>

app/[lang]/webview/refresh/page.tsx

@@ -1,8 +1,13 @@
 import LoadingSpinner from "@/components/LoadingSpinner"
+import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
-export default function Refresh() {
+import { LangParams, PageArgs } from "@/types/params"
+
+export default function Refresh({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
+
   return (
     <div className={styles.container}>
       <LoadingSpinner />