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 { getLang } from "@/i18n/serverContext"
-import type { LangParams, LayoutArgs } from "@/types/params"
 
 export default async function ProtectedLayout({
   children,
-  params,
+}: React.PropsWithChildren) {
-}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
   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 & {
-}: React.PropsWithChildren<LayoutArgs<LangParams>> & {
   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} />
-  return <LanguageSwitcher urls={baseUrls} lang={params.lang} />
 }

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} />}
-      myPagesMobileDropdown={
+      languageSwitcher={<LanguageSwitcher urls={baseUrls} />}
-        <MyPagesMobileDropdown navigation={navigation} lang={params.lang} />
-      }
-      languageSwitcher={<LanguageSwitcher urls={baseUrls} lang={params.lang} />}
     />
   )
 }

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} />
-  return <LanguageSwitcher urls={baseUrls} lang={params.lang} />
 }

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} />
-  return <MyPagesMobileDropdown navigation={null} lang={params.lang} />
 }

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 />
-
-  return <NotFound lang={lang} />
 }

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
+        Preview for {params.contentType}:{params.uid} in {getLang()} with params{" "}
-        params <pre>{JSON.stringify(searchParams, null, 2)}</pre> goes here
+        <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 />

components/ContentType/HotelPage/HotelPage.tsx

@@ -1,5 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"
 
+import { getLang } from "@/i18n/serverContext"
+
 import AmenitiesList from "./AmenitiesList"
 import IntroSection from "./IntroSection"
 import { Rooms } from "./Rooms"
@@ -7,9 +9,7 @@ import TabNavigation from "./TabNavigation"
 
 import styles from "./hotelPage.module.css"
 
-import type { LangParams } from "@/types/params"
+export default async function HotelPage() {
-
-export default async function HotelPage({ lang }: LangParams) {
   const hotelPageIdentifierData =
     await serverClient().contentstack.hotelPage.get()
 
@@ -19,7 +19,7 @@ export default async function HotelPage({ lang }: LangParams) {
 
   const { attributes, roomCategories } = await serverClient().hotel.getHotel({
     hotelId: hotelPageIdentifierData.hotel_page_id,
-    language: lang,
+    language: getLang(),
     include: ["RoomCategories"],
   })
 

components/ContentType/LoyaltyPage/LoyaltyPage.tsx

@@ -8,9 +8,7 @@ import TrackingSDK from "@/components/TrackingSDK"
 
 import styles from "./loyaltyPage.module.css"
 
-import type { LangParams } from "@/types/params"
+export default async function LoyaltyPage() {
-
-export default async function LoyaltyPage({ lang }: LangParams) {
   const loyaltyPageRes = await serverClient().contentstack.loyaltyPage.get()
 
   if (!loyaltyPageRes) {
@@ -23,14 +21,12 @@ export default async function LoyaltyPage({ lang }: LangParams) {
     <>
       <section className={styles.content}>
         {loyaltyPage.sidebar.length ? (
-          <Sidebar blocks={loyaltyPage.sidebar} lang={lang} />
+          <Sidebar blocks={loyaltyPage.sidebar} />
         ) : null}
 
         <MaxWidth className={styles.blocks} tag="main">
           <Title>{loyaltyPage.heading}</Title>
-          {loyaltyPage.blocks ? (
+          {loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null}
-            <Blocks blocks={loyaltyPage.blocks} lang={lang} />
-          ) : null}
         </MaxWidth>
       </section>
 

components/ContentType/Webviews/AccountPage.tsx

@@ -8,12 +8,11 @@ import MaxWidth from "@/components/MaxWidth"
 import Content from "@/components/MyPages/AccountPage/Webview/Content"
 import TrackingSDK from "@/components/TrackingSDK"
 import LinkToOverview from "@/components/Webviews/LinkToOverview"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./accountPage.module.css"
 
-import { LangParams } from "@/types/params"
+export default async function MyPages() {
-
-export default async function MyPages({ lang }: LangParams) {
   const accountPageRes = await serverClient().contentstack.accountPage.get()
 
   if (!accountPageRes) {
@@ -22,13 +21,14 @@ export default async function MyPages({ lang }: LangParams) {
 
   const { tracking, accountPage } = accountPageRes
 
-  const linkToOverview = `/${lang}/webview${accountPage.url}` !== overview[lang]
+  const linkToOverview =
+    `/${getLang()}/webview${accountPage.url}` !== overview[getLang()]
 
   return (
     <>
       <MaxWidth className={styles.blocks} tag="main">
-        {linkToOverview ? <LinkToOverview lang={lang} /> : null}
+        {linkToOverview ? <LinkToOverview /> : null}
-        <Content lang={lang} content={accountPage.content} />
+        <Content content={accountPage.content} />
       </MaxWidth>
 
       <TrackingSDK pageData={tracking} />

components/ContentType/Webviews/LoyaltyPage.tsx

@@ -8,9 +8,7 @@ import LinkToOverview from "@/components/Webviews/LinkToOverview"
 
 import styles from "./loyaltyPage.module.css"
 
-import { LangParams } from "@/types/params"
+export default async function AboutScandicFriends() {
-
-export default async function AboutScandicFriends({ lang }: LangParams) {
   const loyaltyPageRes = await serverClient().contentstack.loyaltyPage.get()
 
   if (!loyaltyPageRes) {
@@ -21,10 +19,10 @@ export default async function AboutScandicFriends({ lang }: LangParams) {
   return (
     <>
       <section className={styles.content}>
-        <LinkToOverview lang={lang} />
+        <LinkToOverview />
         <MaxWidth tag="main" className={styles.blocks}>
           <Title>{loyaltyPage.heading}</Title>
-          <Blocks blocks={loyaltyPage.blocks} lang={lang} />
+          <Blocks blocks={loyaltyPage.blocks} />
         </MaxWidth>
       </section>
 

components/Current/Footer/index.tsx

@@ -1,15 +1,16 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import Image from "@/components/Image"
+import { getLang } from "@/i18n/serverContext"
 
 import Navigation from "./Navigation"
 
 import styles from "./footer.module.css"
 
-import { LangParams } from "@/types/params"
+export default async function Footer() {
-
+  const footerData = await serverClient().contentstack.base.footer({
-export default async function Footer({ lang }: LangParams) {
+    lang: getLang(),
-  const footerData = await serverClient().contentstack.base.footer({ lang })
+  })
   if (!footerData) {
     return null
   }

components/Current/Header/LanguageSwitcher/Desktop/index.tsx

@@ -4,15 +4,14 @@ import { useCallback, useEffect, useRef, useState } from "react"
 import { Lang, languages } from "@/constants/languages"
 
 import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
 
 import styles from "./desktop.module.css"
 
 import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
 
-export default function Desktop({
+export default function Desktop({ urls }: LanguageSwitcherProps) {
-  currentLanguage,
+  const currentLanguage = useLang()
-  urls,
-}: LanguageSwitcherProps) {
   const [isOpen, setIsOpen] = useState(false)
   const divRef = useRef<HTMLDivElement>(null)
 

components/Current/Header/LanguageSwitcher/Mobile/index.tsx

@@ -3,14 +3,14 @@ import { useState } from "react"
 
 import { Lang, languages } from "@/constants/languages"
 
+import useLang from "@/hooks/useLang"
+
 import styles from "./mobile.module.css"
 
 import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
 
-export default function Mobile({
+export default function Mobile({ urls }: LanguageSwitcherProps) {
-  currentLanguage,
+  const currentLanguage = useLang()
-  urls,
-}: LanguageSwitcherProps) {
   const [isOpen, setIsOpen] = useState(false)
 
   function toggleOpen() {

components/Current/Header/LanguageSwitcher/index.tsx

@@ -1,19 +1,15 @@
 import Desktop from "./Desktop"
 import Mobile from "./Mobile"
 
-import { LangParams } from "@/types/params"
 import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
 
-type LanguageSwitcherProps = LangParams & { urls: LanguageSwitcherData }
+type LanguageSwitcherProps = { urls: LanguageSwitcherData }
 
-export default function LanguageSwitcher({
+export default function LanguageSwitcher({ urls }: LanguageSwitcherProps) {
-  urls,
-  lang,
-}: LanguageSwitcherProps) {
   return (
     <>
-      <Desktop currentLanguage={lang} urls={urls} />
+      <Desktop urls={urls} />
-      <Mobile currentLanguage={lang} urls={urls} />
+      <Mobile urls={urls} />
     </>
   )
 }

components/Current/Header/LoginButton.tsx

@@ -7,26 +7,24 @@ import { login } from "@/constants/routes/handleAuth"
 
 import Link from "@/components/TempDesignSystem/Link"
 import { LinkProps } from "@/components/TempDesignSystem/Link/link"
+import useLang from "@/hooks/useLang"
 import { trackLoginClick } from "@/utils/tracking"
 
 import { TrackingPosition } from "@/types/components/tracking"
-import { LangParams } from "@/types/params"
 
 export default function LoginButton({
   className,
   position,
   trackingId,
-  lang,
   children,
   color = "black",
-}: PropsWithChildren<
+}: PropsWithChildren<{
-  LangParams & {
+  className: string
-    className: string
+  trackingId: string
-    trackingId: string
+  position: TrackingPosition
-    position: TrackingPosition
+  color?: LinkProps["color"]
-    color?: LinkProps["color"]
+}>) {
-  }
+  const lang = useLang()
->) {
   const pathName = usePathname()
 
   useEffect(() => {

components/Current/Header/MainMenu/index.tsx

@@ -8,6 +8,7 @@ import useDropdownStore from "@/stores/main-menu"
 import Image from "@/components/Image"
 import Avatar from "@/components/MyPages/Avatar"
 import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
 import { trackClick } from "@/utils/tracking"
 
 import BookingButton from "../BookingButton"
@@ -27,9 +28,9 @@ export function MainMenu({
   myPagesMobileDropdown,
   bookingHref,
   user,
-  lang,
 }: MainMenuProps) {
   const intl = useIntl()
+  const lang = useLang()
 
   const {
     isHamburgerMenuOpen,
@@ -111,7 +112,6 @@ export function MainMenu({
                       position="hamburger menu"
                       trackingId="loginStartHamburgerMenu"
                       className={styles.mobileLinkButton}
-                      lang={lang}
                     >
                       {intl.formatMessage({ id: "Log in" })}
                     </LoginButton>

components/Current/Header/MyPagesMobileDropdown/index.tsx

@@ -2,7 +2,6 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
-import { Lang } from "@/constants/languages"
 import { logout } from "@/constants/routes/handleAuth"
 import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
 import useDropdownStore from "@/stores/main-menu"
@@ -10,6 +9,7 @@ import useDropdownStore from "@/stores/main-menu"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import useLang from "@/hooks/useLang"
 
 import styles from "./my-pages-mobile-dropdown.module.css"
 
@@ -17,12 +17,11 @@ type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
 
 export default function MyPagesMobileDropdown({
   navigation,
-  lang,
 }: {
   navigation: Navigation
-  lang: Lang | null
 }) {
   const { formatMessage } = useIntl()
+  const lang = useLang()
   const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
     useDropdownStore()
 

components/Current/Header/TopMenu/index.tsx

@@ -3,6 +3,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import LoginButton from "../LoginButton"
 
@@ -19,7 +20,6 @@ export default async function TopMenu({
   homeHref,
   links,
   languageSwitcher,
-  lang,
 }: TopMenuProps) {
   const { formatMessage } = await getIntl()
   const user = await serverClient().user.name()
@@ -47,7 +47,7 @@ export default async function TopMenu({
               <>
                 {user ? (
                   <Link
-                    href={logout[lang]}
+                    href={logout[getLang()]}
                     className={styles.sessionLink}
                     prefetch={false}
                   >
@@ -56,7 +56,7 @@ export default async function TopMenu({
                 ) : null}
                 <div className={styles.loginSeparator} />
                 <Link
-                  href={logout[lang]}
+                  href={logout[getLang()]}
                   className={styles.sessionLink}
                   prefetch={false}
                 >
@@ -68,7 +68,6 @@ export default async function TopMenu({
                 position="hamburger menu"
                 trackingId="loginStartTopMeny"
                 className={`${styles.sessionLink} ${styles.loginLink}`}
-                lang={lang}
               >
                 {formatMessage({ id: "Log in" })}
               </LoginButton>

components/Current/Header/index.tsx

@@ -4,6 +4,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import { auth } from "@/auth"
 import { BookingWidget } from "@/components/BookingWidget"
+import { getLang } from "@/i18n/serverContext"
 
 import { MainMenu } from "./MainMenu"
 import OfflineBanner from "./OfflineBanner"
@@ -11,17 +12,15 @@ import TopMenu from "./TopMenu"
 
 import styles from "./header.module.css"
 
-import { LangParams } from "@/types/params"
-
 export default async function Header({
-  lang,
   languageSwitcher,
   myPagesMobileDropdown,
-}: LangParams & { languageSwitcher: React.ReactNode } & {
+}: {
+  languageSwitcher: React.ReactNode
   myPagesMobileDropdown: React.ReactNode
 }) {
   const data = await serverClient().contentstack.base.header({
-    lang,
+    lang: getLang(),
   })
 
   const user = await serverClient().user.name()
@@ -35,7 +34,7 @@ export default async function Header({
     return null
   }
 
-  const homeHref = homeHrefs[env.NODE_ENV][lang]
+  const homeHref = homeHrefs[env.NODE_ENV][getLang()]
   const { frontpage_link_text, logo, menu, top_menu } = data
 
   const topMenuMobileLinks = top_menu.links
@@ -50,7 +49,6 @@ export default async function Header({
         homeHref={homeHref}
         links={top_menu.links}
         languageSwitcher={languageSwitcher}
-        lang={lang}
       />
       <MainMenu
         frontpageLinkText={frontpage_link_text}
@@ -62,7 +60,6 @@ export default async function Header({
         myPagesMobileDropdown={myPagesMobileDropdown}
         bookingHref={homeHref}
         user={user}
-        lang={lang}
       />
       {hideBookingWidget ? null : <BookingWidget />}
     </header>

components/Current/LangPopup/index.tsx

@@ -2,7 +2,9 @@ import { headers } from "next/headers"
 
 import { Lang, localeToLang } from "@/constants/languages"
 
-export default function LangPopup({ lang }: { lang: Lang }) {
+import { getLang } from "@/i18n/serverContext"
+
+export default function LangPopup() {
   const headersList = headers()
   const preferedLang = headersList.get("Accept-Language") ?? ""
 
@@ -14,7 +16,7 @@ export default function LangPopup({ lang }: { lang: Lang }) {
 
   const langOfChoice: Lang = localeToLang[preferedLang as Lang]
 
-  if (langOfChoice === lang) {
+  if (langOfChoice === getLang()) {
     return null
   }
 

components/Current/NotFound/index.tsx

@@ -1,11 +1,11 @@
+import { getLang } from "@/i18n/serverContext"
+
 import { texts } from "./Texts"
 
 import styles from "./notFound.module.css"
 
-import { LangParams } from "@/types/params"
+export default function NotFound() {
-
+  const infoTexts = texts[getLang()]
-export default function NotFound({ lang }: LangParams) {
-  const infoTexts = texts[lang]
   return (
     <div className={styles.container}>
       <div className={styles.content}>

components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx

@@ -8,6 +8,7 @@ import { membershipLevels } from "@/constants/membershipLevels"
 
 import Image from "@/components/Image"
 import Select from "@/components/TempDesignSystem/Select"
+import useLang from "@/hooks/useLang"
 import { getMembership } from "@/utils/user"
 
 import DA from "./data/DA.json"
@@ -33,7 +34,6 @@ import {
   OverviewTableProps,
   OverviewTableReducerAction,
 } from "@/types/components/loyalty/blocks"
-import { LangParams } from "@/types/params"
 import type { User } from "@/types/user"
 
 const levelsTranslations = {
@@ -127,9 +127,9 @@ function reducer(state: any, action: OverviewTableReducerAction) {
 
 export default function OverviewTable({
   activeMembership,
-  lang,
+}: OverviewTableProps) {
-}: OverviewTableProps & LangParams) {
   const intl = useIntl()
+  const lang = useLang()
   const levelsData = levelsTranslations[lang]
   const [selectionState, dispatch] = useReducer(
     reducer,

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -17,12 +17,8 @@ import type {
   DynamicContentProps,
 } from "@/types/components/loyalty/blocks"
 import { LoyaltyComponentEnum } from "@/types/components/loyalty/enums"
-import { LangParams } from "@/types/params"
 
-async function DynamicComponentBlock({
+async function DynamicComponentBlock({ component }: DynamicComponentProps) {
-  component,
-  lang,
-}: DynamicComponentProps & LangParams) {
   const membershipLevel = await serverClient().user.membershipLevel()
   switch (component) {
     case LoyaltyComponentEnum.how_it_works:
@@ -30,7 +26,7 @@ async function DynamicComponentBlock({
     case LoyaltyComponentEnum.loyalty_levels:
       return <LoyaltyLevels />
     case LoyaltyComponentEnum.overview_table:
-      return <OverviewTable activeMembership={membershipLevel} lang={lang} />
+      return <OverviewTable activeMembership={membershipLevel} />
     default:
       return null
   }
@@ -39,8 +35,7 @@ async function DynamicComponentBlock({
 export default function DynamicContent({
   dynamicContent,
   firstItem,
-  lang,
+}: DynamicContentProps) {
-}: DynamicContentProps & LangParams) {
   const displayHeader = !!(
     dynamicContent.link ||
     dynamicContent.subtitle ||
@@ -63,7 +58,7 @@ export default function DynamicContent({
           topTitle={firstItem}
         />
       ) : null}
-      <DynamicComponentBlock component={dynamicContent.component} lang={lang} />
+      <DynamicComponentBlock component={dynamicContent.component} />
       {displayHeader && (
         <SectionLink link={dynamicContent.link} variant="mobile" />
       )}

components/Loyalty/Blocks/WebView/index.tsx

@@ -1,15 +1,15 @@
 import JsonToHtml from "@/components/JsonToHtml"
 import DynamicContentBlock from "@/components/Loyalty/Blocks/DynamicContent"
 import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
+import { getLang } from "@/i18n/serverContext"
 import { modWebviewLink } from "@/utils/webviews"
 
 import CardsGrid from "../CardsGrid"
 
 import type { BlocksProps } from "@/types/components/loyalty/blocks"
 import { LoyaltyBlocksTypenameEnum } from "@/types/components/loyalty/enums"
-import { LangParams } from "@/types/params"
 
-export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
+export function Blocks({ blocks }: BlocksProps) {
   return blocks.map((block, idx) => {
     const firstItem = idx === 0
     switch (block.__typename) {
@@ -35,7 +35,10 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
           link: block.dynamic_content.link
             ? {
                 ...block.dynamic_content.link,
-                href: modWebviewLink(block.dynamic_content.link.href, lang),
+                href: modWebviewLink(
+                  block.dynamic_content.link.href,
+                  getLang()
+                ),
               }
             : undefined,
         }
@@ -45,13 +48,12 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
             dynamicContent={dynamicContent}
             firstItem={firstItem}
             key={`${block.dynamic_content.title}-${idx}`}
-            lang={lang}
           />
         )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts:
         const shortcuts = block.shortcuts.shortcuts.map((shortcut) => ({
           ...shortcut,
-          url: modWebviewLink(shortcut.url, lang),
+          url: modWebviewLink(shortcut.url, getLang()),
         }))
         return (
           <Shortcuts

components/Loyalty/Blocks/index.tsx

@@ -6,9 +6,8 @@ import CardsGrid from "./CardsGrid"
 
 import type { BlocksProps } from "@/types/components/loyalty/blocks"
 import { LoyaltyBlocksTypenameEnum } from "@/types/components/loyalty/enums"
-import { LangParams } from "@/types/params"
 
-export function Blocks({ blocks, lang }: BlocksProps & LangParams) {
+export function Blocks({ blocks }: BlocksProps) {
   return blocks.map((block, idx) => {
     const firstItem = idx === 0
     switch (block.__typename) {
@@ -27,7 +26,6 @@ export function Blocks({ blocks, lang }: BlocksProps & LangParams) {
             dynamicContent={block.dynamic_content}
             firstItem={firstItem}
             key={`${block.dynamic_content.title}-${idx}`}
-            lang={lang}
           />
         )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts:

components/Loyalty/Sidebar/JoinLoyalty/index.tsx

@@ -14,12 +14,10 @@ import Contact from "./Contact"
 import styles from "./joinLoyalty.module.css"
 
 import type { JoinLoyaltyContactProps } from "@/types/components/loyalty/sidebar"
-import { LangParams } from "@/types/params"
 
 export default async function JoinLoyaltyContact({
   block,
-  lang,
+}: JoinLoyaltyContactProps) {
-}: JoinLoyaltyContactProps & LangParams) {
   const { formatMessage } = await getIntl()
   const user = await serverClient().user.name()
 
@@ -55,7 +53,6 @@ export default async function JoinLoyaltyContact({
           <Body>{formatMessage({ id: "Already a friend?" })}</Body>
           <LoginButton
             className={styles.link}
-            lang={lang}
             trackingId="loginJoinLoyalty"
             position="join scandic friends sidebar"
             color="burgundy"

components/Loyalty/Sidebar/index.tsx

@@ -10,12 +10,8 @@ import {
   SidebarTypenameEnum,
 } from "@/types/components/loyalty/enums"
 import { SidebarProps } from "@/types/components/loyalty/sidebar"
-import { LangParams } from "@/types/params"
 
-export default function SidebarLoyalty({
+export default function SidebarLoyalty({ blocks }: SidebarProps) {
-  blocks,
-  lang,
-}: SidebarProps & LangParams) {
   return (
     <aside className={styles.aside}>
       {blocks.map((block, idx) => {
@@ -37,18 +33,12 @@ export default function SidebarLoyalty({
               <JoinLoyaltyContact
                 block={block.join_loyalty_contact}
                 key={`${block.__typename}-${idx}`}
-                lang={lang}
               />
             )
           case SidebarTypenameEnum.LoyaltyPageSidebarDynamicContent:
             switch (block.dynamic_content.component) {
               case LoyaltySidebarDynamicComponentEnum.my_pages_navigation:
-                return (
+                return <SidebarMyPages key={`${block.__typename}-${idx}`} />
-                  <SidebarMyPages
-                    key={`${block.__typename}-${idx}`}
-                    lang={lang}
-                  />
-                )
               default:
                 return null
             }

components/MyPages/AccountPage/Content.tsx

@@ -7,6 +7,7 @@ import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
 import PreviousStays from "@/components/MyPages/Blocks/Stays/Previous"
 import SoonestStays from "@/components/MyPages/Blocks/Stays/Soonest"
 import UpcomingStays from "@/components/MyPages/Blocks/Stays/Upcoming"
+import { getLang } from "@/i18n/serverContext"
 import { removeMultipleSlashes } from "@/utils/url"
 
 import PointsOverview from "../Blocks/Points/Overview"
@@ -47,7 +48,7 @@ function DynamicComponent({ component, props }: AccountPageContentProps) {
   }
 }
 
-export default function Content({ lang, content }: ContentProps) {
+export default function Content({ content }: ContentProps) {
   return content.map((item, idx) => {
     switch (item.__typename) {
       case ContentEntries.AccountPageContentDynamicContent:
@@ -57,14 +58,13 @@ export default function Content({ lang, content }: ContentProps) {
                 item.dynamic_content.link.linkConnection.edges[0].node
                   .original_url ||
                 removeMultipleSlashes(
-                  `/${lang}/${item.dynamic_content.link.linkConnection.edges[0].node.url}`
+                  `/${getLang()}/${item.dynamic_content.link.linkConnection.edges[0].node.url}`
                 ),
               text: item.dynamic_content.link.link_text,
             }
           : null
 
         const componentProps = {
-          lang,
           title: item.dynamic_content.title,
           // TODO: rename preamble to subtitle in Contentstack?
           subtitle: item.dynamic_content.preamble,

components/MyPages/AccountPage/Webview/Content.tsx

@@ -1,6 +1,7 @@
 import JsonToHtml from "@/components/JsonToHtml"
 import Overview from "@/components/MyPages/Blocks/Overview"
 import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
+import { getLang } from "@/i18n/serverContext"
 import { removeMultipleSlashes } from "@/utils/url"
 import { modWebviewLink } from "@/utils/webviews"
 
@@ -39,7 +40,7 @@ function DynamicComponent({ component, props }: AccountPageContentProps) {
   }
 }
 
-export default function Content({ lang, content }: ContentProps) {
+export default function Content({ content }: ContentProps) {
   return (
     <>
       {content.map((item, idx) => {
@@ -62,7 +63,6 @@ export default function Content({ lang, content }: ContentProps) {
               : null
 
             const componentProps = {
-              lang,
               title: item.dynamic_content.title,
               // TODO: rename preamble to subtitle in Contentstack?
               subtitle: item.dynamic_content.preamble,
@@ -79,7 +79,7 @@ export default function Content({ lang, content }: ContentProps) {
             const shortcuts = item.shortcuts.shortcuts.map((shortcut) => {
               return {
                 ...shortcut,
-                url: modWebviewLink(shortcut.url, lang),
+                url: modWebviewLink(shortcut.url, getLang()),
               }
             })
             return (

components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx

@@ -6,20 +6,19 @@ import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 import Grids from "@/components/TempDesignSystem/Grids"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getLang } from "@/i18n/serverContext"
 import { getMembershipLevelObject } from "@/utils/membershipLevel"
 import { getMembership } from "@/utils/user"
 
 import styles from "./current.module.css"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-import type { LangParams } from "@/types/params"
 
 export default async function CurrentBenefitsBlock({
   title,
   subtitle,
   link,
-  lang,
+}: AccountPageComponentProps) {
-}: AccountPageComponentProps & LangParams) {
   const user = await serverClient().user.get()
   // TAKE NOTE: we need clarification on how benefits stack from different levels
   // in order to determine if a benefit is specific to a level or if it is a cumulative benefit
@@ -35,7 +34,7 @@ export default async function CurrentBenefitsBlock({
 
   const currentLevel = getMembershipLevelObject(
     user.memberships[0].membershipLevel as MembershipLevelEnum,
-    lang
+    getLang()
   )
   if (!currentLevel) {
     //  TODO: handle this case?

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -11,6 +11,7 @@ import Grids from "@/components/TempDesignSystem/Grids"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 import { getMembershipLevelObject } from "@/utils/membershipLevel"
 
 import styles from "./next.module.css"
@@ -20,7 +21,6 @@ import { AccountPageComponentProps } from "@/types/components/myPages/myPage/acc
 export default async function NextLevelBenefitsBlock({
   title,
   subtitle,
-  lang,
   link,
 }: AccountPageComponentProps) {
   const { formatMessage } = await getIntl()
@@ -30,7 +30,7 @@ export default async function NextLevelBenefitsBlock({
   }
   const nextLevel = getMembershipLevelObject(
     user.memberships[0].nextLevel as MembershipLevelEnum,
-    lang
+    getLang()
   )
   if (!nextLevel) {
     //  TODO: handle this case, when missing or when user is top level?

components/MyPages/Blocks/Overview/Stats/Points/index.tsx

@@ -1,5 +1,6 @@
 import { MembershipLevelEnum } from "@/constants/membershipLevels"
 
+import { getLang } from "@/i18n/serverContext"
 import { getMembershipLevelObject } from "@/utils/membershipLevel"
 import { getMembership } from "@/utils/user"
 
@@ -7,13 +8,12 @@ import PointsContainer from "./Container"
 import { NextLevelPointsColumn, YourPointsColumn } from "./PointsColumn"
 
 import { UserProps } from "@/types/components/myPages/user"
-import { LangParams } from "@/types/params"
 
-export default async function Points({ user, lang }: UserProps & LangParams) {
+export default async function Points({ user }: UserProps) {
   const membership = getMembership(user.memberships)
   const nextLevel = getMembershipLevelObject(
     membership?.nextLevel as MembershipLevelEnum,
-    lang
+    getLang()
   )
 
   return (

components/MyPages/Blocks/Overview/Stats/index.tsx

@@ -6,12 +6,11 @@ import Points from "./Points"
 import styles from "./stats.module.css"
 
 import type { UserProps } from "@/types/components/myPages/user"
-import type { LangParams } from "@/types/params"
 
-export default function Stats({ user, lang }: UserProps & LangParams) {
+export default function Stats({ user }: UserProps) {
   return (
     <section className={styles.stats}>
-      <Points user={user} lang={lang} />
+      <Points user={user} />
       <Divider variant="default" color="pale" />
       <ExpiringPoints user={user} />
     </section>

components/MyPages/Blocks/Overview/index.tsx

@@ -4,6 +4,7 @@ import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 import Divider from "@/components/TempDesignSystem/Divider"
+import { getLang } from "@/i18n/serverContext"
 
 import Hero from "./Friend/Hero"
 import Friend from "./Friend"
@@ -12,14 +13,12 @@ import Stats from "./Stats"
 import styles from "./overview.module.css"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-import type { LangParams } from "@/types/params"
 
 export default async function Overview({
   link,
   subtitle,
   title,
-  lang,
+}: AccountPageComponentProps) {
-}: AccountPageComponentProps & LangParams) {
   const user = await serverClient().user.get()
   if (!user || "error" in user) {
     return null
@@ -31,7 +30,7 @@ export default async function Overview({
       <Hero color="red">
         <Friend user={user} color="burgundy" />
         <Divider className={styles.divider} color="peach" />
-        <Stats user={user} lang={lang} />
+        <Stats user={user} />
       </Hero>
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>

components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/index.tsx

@@ -1,6 +1,7 @@
 import { dt } from "@/lib/dt"
 
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import AwardPoints from "./AwardPoints"
 
@@ -8,15 +9,17 @@ import styles from "./row.module.css"
 
 import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
 
-export default async function Row({ transaction, lang }: RowProps) {
+export default async function Row({ transaction }: RowProps) {
   const { formatMessage } = await getIntl()
   const description =
     transaction.hotelName && transaction.city
       ? `${transaction.hotelName}, ${transaction.city} ${transaction.nights} ${formatMessage({ id: "nights" })}`
       : `${transaction.nights} ${formatMessage({ id: "nights" })}`
-  const arrival = dt(transaction.checkinDate).locale(lang).format("DD MMM YYYY")
+  const arrival = dt(transaction.checkinDate)
+    .locale(getLang())
+    .format("DD MMM YYYY")
   const departure = dt(transaction.checkoutDate)
-    .locale(lang)
+    .locale(getLang())
     .format("DD MMM YYYY")
   return (
     <tr className={styles.tr}>

components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx

@@ -15,7 +15,7 @@ const tableHeadings = [
   "Points",
 ]
 
-export default async function DesktopTable({ lang, transactions }: TableProps) {
+export default async function DesktopTable({ transactions }: TableProps) {
   const { formatMessage } = await getIntl()
   return (
     <div className={styles.container}>
@@ -35,7 +35,6 @@ export default async function DesktopTable({ lang, transactions }: TableProps) {
           <tbody>
             {transactions.map((transaction) => (
               <Row
-                lang={lang}
                 key={transaction.confirmationNumber}
                 transaction={transaction}
               />

components/MyPages/Blocks/Points/EarnAndBurn/Mobile/index.tsx

@@ -3,12 +3,13 @@ import { dt } from "@/lib/dt"
 import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/AwardPoints"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./mobile.module.css"
 
 import type { TableProps } from "@/types/components/myPages/myPage/earnAndBurn"
 
-export default async function MobileTable({ lang, transactions }: TableProps) {
+export default async function MobileTable({ transactions }: TableProps) {
   const { formatMessage } = await getIntl()
   return (
     <div className={styles.container}>
@@ -32,7 +33,7 @@ export default async function MobileTable({ lang, transactions }: TableProps) {
                 <td className={`${styles.td} ${styles.transactionDetails}`}>
                   <span className={styles.transactionDate}>
                     {dt(transaction.checkinDate)
-                      .locale(lang)
+                      .locale(getLang())
                       .format("DD MMM YYYY")}
                   </span>
                   {transaction.hotelName && transaction.city ? (

components/MyPages/Blocks/Points/EarnAndBurn/index.tsx

@@ -10,7 +10,6 @@ import MobileTable from "./Mobile"
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function EarnAndBurn({
-  lang,
   link,
   subtitle,
   title,
@@ -23,8 +22,8 @@ export default async function EarnAndBurn({
   return (
     <SectionContainer>
       <SectionHeader title={title} link={link} subtitle={subtitle} />
-      <MobileTable lang={lang} transactions={transactions.data} />
+      <MobileTable transactions={transactions.data} />
-      <DesktopTable lang={lang} transactions={transactions.data} />
+      <DesktopTable transactions={transactions.data} />
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )

components/MyPages/Blocks/Points/Overview/index.tsx

@@ -12,14 +12,12 @@ import Stats from "../../Overview/Stats"
 import styles from "./overview.module.css"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-import type { LangParams } from "@/types/params"
 
 export default async function PointsOverview({
   link,
   subtitle,
   title,
-  lang,
+}: AccountPageComponentProps) {
-}: AccountPageComponentProps & LangParams) {
   const user = await serverClient().user.get()
   if (!user || "error" in user) {
     return null
@@ -31,7 +29,7 @@ export default async function PointsOverview({
       <Hero color="burgundy">
         <Friend user={user} color="red" />
         <Divider className={styles.divider} color="peach" />
-        <Stats user={user} lang={lang} />
+        <Stats user={user} />
       </Hero>
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>

components/MyPages/Blocks/Stays/Previous/Client.tsx

@@ -16,7 +16,6 @@ import type {
 
 export default function ClientPreviousStays({
   initialPreviousStays,
-  lang,
 }: PreviousStaysClientProps) {
   const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
     trpc.user.stays.previous.useInfiniteQuery(
@@ -49,11 +48,7 @@ export default function ClientPreviousStays({
     <ListContainer>
       <Grids.Stackable>
         {stays.map((stay) => (
-          <StayCard
+          <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
-            key={stay.attributes.confirmationNumber}
-            lang={lang}
-            stay={stay}
-          />
         ))}
       </Grids.Stackable>
       {hasNextPage ? (

components/MyPages/Blocks/Stays/Previous/index.tsx

@@ -10,7 +10,6 @@ import EmptyPreviousStaysBlock from "./EmptyPreviousStays"
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function PreviousStays({
-  lang,
   title,
   subtitle,
   link,
@@ -23,10 +22,7 @@ export default async function PreviousStays({
     <SectionContainer>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
       {initialPreviousStays.data.length ? (
-        <ClientPreviousStays
+        <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
-          initialPreviousStays={initialPreviousStays}
-          lang={lang}
-        />
       ) : (
         <EmptyPreviousStaysBlock />
       )}

components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx

@@ -5,12 +5,11 @@ import { ArrowRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./emptyUpcomingStays.module.css"
 
-import { LangParams } from "@/types/params"
+export default async function EmptyUpcomingStaysBlock() {
-
-export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
   const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
@@ -23,7 +22,7 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
         </Title>
       </div>
       <Link
-        href={homeHrefs[env.NODE_ENV][lang]}
+        href={homeHrefs[env.NODE_ENV][getLang()]}
         className={styles.link}
         color="peach80"
       >

components/MyPages/Blocks/Stays/Soonest/index.tsx

@@ -11,7 +11,6 @@ import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function SoonestStays({
-  lang,
   title,
   subtitle,
   link,
@@ -27,15 +26,11 @@ export default async function SoonestStays({
       {response.data.length ? (
         <Grids.Stackable>
           {response.data.map((stay) => (
-            <StayCard
+            <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
-              key={stay.attributes.confirmationNumber}
-              lang={lang}
-              stay={stay}
-            />
           ))}
         </Grids.Stackable>
       ) : (
-        <EmptyUpcomingStaysBlock lang={lang} />
+        <EmptyUpcomingStaysBlock />
       )}
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>

components/MyPages/Blocks/Stays/StayCard/index.tsx

@@ -5,12 +5,14 @@ import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import useLang from "@/hooks/useLang"
 
 import styles from "./stay.module.css"
 
 import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
 
-export default function StayCard({ stay, lang }: StayCardProps) {
+export default function StayCard({ stay }: StayCardProps) {
+  const lang = useLang()
   const { checkinDate, checkoutDate, hotelInformation, bookingUrl } =
     stay.attributes
 

components/MyPages/Blocks/Stays/Upcoming/Client.tsx

@@ -16,7 +16,6 @@ import type {
 
 export default function ClientUpcomingStays({
   initialUpcomingStays,
-  lang,
 }: UpcomingStaysClientProps) {
   const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
     trpc.user.stays.upcoming.useInfiniteQuery(
@@ -49,11 +48,7 @@ export default function ClientUpcomingStays({
     <ListContainer>
       <Grids.Stackable>
         {stays.map((stay) => (
-          <StayCard
+          <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
-            key={stay.attributes.confirmationNumber}
-            lang={lang}
-            stay={stay}
-          />
         ))}
       </Grids.Stackable>
       {hasNextPage ? (

components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -5,12 +5,11 @@ import { ArrowRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./emptyUpcomingStays.module.css"
 
-import { LangParams } from "@/types/params"
+export default async function EmptyUpcomingStaysBlock() {
-
-export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
   const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
@@ -23,7 +22,7 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
         </Title>
       </div>
       <Link
-        href={homeHrefs[env.NODE_ENV][lang]}
+        href={homeHrefs[env.NODE_ENV][getLang()]}
         className={styles.link}
         color="peach80"
       >

components/MyPages/Blocks/Stays/Upcoming/index.tsx

@@ -10,7 +10,6 @@ import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function UpcomingStays({
-  lang,
   title,
   subtitle,
   link,
@@ -23,12 +22,9 @@ export default async function UpcomingStays({
     <SectionContainer>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
       {initialUpcomingStays.data.length ? (
-        <ClientUpcomingStays
+        <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
-          initialUpcomingStays={initialUpcomingStays}
-          lang={lang}
-        />
       ) : (
-        <EmptyUpcomingStaysBlock lang={lang} />
+        <EmptyUpcomingStaysBlock />
       )}
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>

components/MyPages/Sidebar/index.tsx

@@ -7,12 +7,11 @@ import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./sidebar.module.css"
 
-import type { LangParams } from "@/types/params"
+export default async function SidebarMyPages() {
-
-export default async function SidebarMyPages({ lang }: LangParams) {
   const navigation = await serverClient().contentstack.myPages.navigation.get()
   const { formatMessage } = await getIntl()
   if (!navigation) {
@@ -43,7 +42,7 @@ export default async function SidebarMyPages({ lang }: LangParams) {
                 <li>
                   <Link
                     color="burgundy"
-                    href={logout[lang]}
+                    href={logout[getLang()]}
                     prefetch={false}
                     size="small"
                     variant="sidebar"

components/Webviews/LinkToOverview/index.tsx

@@ -4,15 +4,14 @@ import { overview } from "@/constants/routes/webviews"
 
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./linkToOverview.module.css"
 
-import type { LangParams } from "@/types/params"
+export default async function LinkToOverview() {
-
-export default async function LinkToOverview({ lang }: LangParams) {
   const { formatMessage } = await getIntl()
   return (
-    <Link className={styles.overviewLink} href={overview[lang]}>
+    <Link className={styles.overviewLink} href={overview[getLang()]}>
       <ArrowLeft height={20} width={20} />{" "}
       {formatMessage({ id: "Go back to overview" })}
     </Link>

hooks/useLang.ts

@@ -0,0 +1,12 @@
+"use client"
+import { useParams } from "next/navigation"
+
+import { LangParams } from "@/types/params"
+
+/**
+ * A hook to get the current lang from the URL
+ */
+export default function useLang() {
+  const { lang } = useParams<LangParams>()
+  return lang
+}

i18n/i18n.md

@@ -0,0 +1,17 @@
+# Internationalization
+
+## The `lang` route parameter
+
+All page paths starts with a language parameter, e.g. `/sv/utforska-scandic/wi-fi`.
+
+### Get the language in a client component
+
+We have a hook called `useLang` that directly returns the `lang` parameter from the path.
+
+### Get the language in a server component
+
+In order to not prop drill that all the way from a page we use React's `cache` in a way that resembles React`s context, but on the server side.
+
+For this to work we must set the language with `setLang` on all root layouts and pages, including pages in parallel routes. Then we can use `getLang` in the components where we need the language.
+
+This was inspired by [server-only-context](https://github.com/manvalls/server-only-context)

i18n/serverContext.ts

@@ -0,0 +1,22 @@
+import { cache } from "react"
+
+import { Lang } from "@/constants/languages"
+
+const getRef = cache(() => ({ current: Lang.en }))
+
+/**
+ * Set the language for the current request
+ *
+ * It works kind of like React's context,
+ * but on the server side, per request.
+ *
+ * @param newLang
+ */
+export const setLang = (newLang: Lang) => {
+  getRef().current = newLang
+}
+
+/**
+ * Get the global language set for the current request
+ */
+export const getLang = () => getRef().current

lib/trpc/Provider.tsx

@@ -14,9 +14,9 @@ import { env } from "@/env/client"
 import { SessionExpiredError } from "@/server/errors/trpc"
 import { transformer } from "@/server/transformer"
 
-import { trpc } from "./client"
+import useLang from "@/hooks/useLang"
 
-import { LangParams } from "@/types/params"
+import { trpc } from "./client"
 
 function initializeTrpcClient() {
   // Locally we set nextjs to run on port to 3000 so that we always guarantee
@@ -41,10 +41,8 @@ function initializeTrpcClient() {
   })
 }
 
-export default function TrpcProvider({
+export default function TrpcProvider({ children }: React.PropsWithChildren) {
-  children,
+  const lang = useLang()
-  lang,
-}: React.PropsWithChildren<LangParams>) {
   const [queryClient] = useState(
     () =>
       new QueryClient({

types/components/current/header/mainMenu.ts

@@ -1,5 +1,3 @@
-import { Lang } from "@/constants/languages"
-
 import type { Image } from "@/types/image"
 import type {
   CurrentHeaderLink,
@@ -17,5 +15,4 @@ export type MainMenuProps = {
   myPagesMobileDropdown: React.ReactNode | null
   bookingHref: string
   user: Pick<User, "firstName" | "lastName"> | null
-  lang: Lang
 }

types/components/current/header/topMenu.ts

@@ -1,5 +1,3 @@
-import { Lang } from "@/constants/languages"
-
 import type { TopMenuHeaderLink } from "@/types/requests/currentHeader"
 
 export type TopMenuProps = {
@@ -7,5 +5,4 @@ export type TopMenuProps = {
   homeHref: string
   links: TopMenuHeaderLink[]
   languageSwitcher: React.ReactNode | null
-  lang: Lang
 }

types/components/current/languageSwitcher.ts

@@ -8,6 +8,5 @@ export type LanguageSwitcherLink = {
 }
 
 export type LanguageSwitcherProps = {
-  currentLanguage: Lang
   urls: LanguageSwitcherData
 }

types/components/loyalty/sidebar.ts

@@ -6,11 +6,11 @@ import {
 
 import { LangParams } from "@/types/params"
 
-export type SidebarProps = LangParams & {
+export type SidebarProps = {
   blocks: Sidebar[]
 }
 
-export type JoinLoyaltyContactProps = LangParams & {
+export type JoinLoyaltyContactProps = {
   block: JoinLoyaltyContact["join_loyalty_contact"]
 }
 

types/components/myPages/myPage/accountPage.ts

@@ -9,18 +9,15 @@ export type AccountPageContentProps = {
     title: string | null
     subtitle: string | null
     link?: { href: string; text: string }
-    lang: Lang
   }
 }
 
 export type AccountPageComponentProps = {
-  lang: Lang
   title: string | null
   subtitle: string | null
   link?: { href: string; text: string }
 }
 
 export type ContentProps = {
-  lang: Lang
   content: AccountPageContentItem[]
 }

types/components/myPages/myPage/earnAndBurn.ts

@@ -24,12 +24,10 @@ export type EarnAndBurnProps = {
 }
 
 export interface TableProps {
-  lang: Lang
   transactions: Transactions
 }
 
 export interface RowProps {
-  lang: Lang
   transaction: Transaction
 }
 

types/components/myPages/stays/previous.ts

@@ -6,10 +6,11 @@ export type PreviousStaysResponse = Awaited<
 >
 export type PreviousStaysNonNullResponseObject =
   NonNullable<PreviousStaysResponse>
-export type PreviousStays = NonNullable<PreviousStaysNonNullResponseObject>["data"]
+export type PreviousStays =
-export type PreviousStay = NonNullable<PreviousStaysNonNullResponseObject>["data"][number]
+  NonNullable<PreviousStaysNonNullResponseObject>["data"]
+export type PreviousStay =
+  NonNullable<PreviousStaysNonNullResponseObject>["data"][number]
 
 export interface PreviousStaysClientProps {
-  lang: Lang
   initialPreviousStays: PreviousStaysNonNullResponseObject
 }

types/components/myPages/stays/stayCard.ts

@@ -1,7 +1,5 @@
-import type { Lang } from "@/constants/languages"
 import type { Stay } from "@/server/routers/user/output"
 
 export type StayCardProps = {
-  lang: Lang
   stay: Stay
 }

types/components/myPages/stays/upcoming.ts

@@ -6,10 +6,11 @@ export type UpcomingStaysResponse = Awaited<
 >
 export type UpcomingStaysNonNullResponseObject =
   NonNullable<UpcomingStaysResponse>
-export type UpcomingStays = NonNullable<UpcomingStaysNonNullResponseObject>["data"]
+export type UpcomingStays =
-export type UpcomingStay = NonNullable<UpcomingStaysNonNullResponseObject>["data"][number]
+  NonNullable<UpcomingStaysNonNullResponseObject>["data"]
+export type UpcomingStay =
+  NonNullable<UpcomingStaysNonNullResponseObject>["data"][number]
 
 export interface UpcomingStaysClientProps {
-  lang: Lang
   initialUpcomingStays: UpcomingStaysNonNullResponseObject
 }