implement fallback language

apps/login/package.json

@@ -42,6 +42,7 @@
     "@zitadel/proto": "workspace:*",
     "clsx": "1.2.1",
     "copy-to-clipboard": "^3.3.3",
+    "deepmerge": "^4.3.1",
     "moment": "^2.29.4",
     "next": "14.2.14",
     "next-intl": "^3.20.0",

apps/login/src/app/(login)/layout.tsx

@@ -54,7 +54,7 @@ export default async function RootLayout({
                 <GlobalNav />
               ) : (
                 <div className="absolute bottom-0 right-0 flex flex-row p-4 items-center space-x-4">
-                  <LanguageSwitcher locale={`${locale}`} />
+                  {locale && <LanguageSwitcher locale={locale} />}
                   <Theme />
                 </div>
               )}

apps/login/src/i18n/request.ts

@@ -1,14 +1,20 @@
+import deepmerge from "deepmerge";
 import { getRequestConfig } from "next-intl/server";
 import { cookies } from "next/headers";
 
 export default getRequestConfig(async () => {
+  const fallback = "en";
   const cookiesList = cookies();
   const locale: string = cookiesList.get("NEXT_LOCALE")?.value ?? "en";
 
+  const userMessages = (await import(`../../locales/${locale}.json`)).default;
+  const fallbackMessages = (await import(`../../locales/${fallback}.json`))
+    .default;
+
   console.log("i18nRequest", locale);
 
   return {
     locale,
-    messages: (await import(`../../locales/${locale}.json`)).default,
+    messages: deepmerge(fallbackMessages, userMessages),
   };
 });