Only send translations used by client components to the browser

Server components read their translations on the server, but every
namespace was serialized into each page for the client provider.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/app/[locale]/layout.tsx

@@ -2,6 +2,7 @@ import "@/app/globals.css"
 
 import { hasLocale, NextIntlClientProvider } from "next-intl"
 import type { Metadata, Viewport } from "next"
+import { getMessages } from "next-intl/server"
 import { notFound } from "next/navigation"
 
 import LanguageSelector from "@/components/ui/languageSelector"
@@ -9,6 +10,11 @@ import { THEME_COLOR } from "@/components/seo"
 import UmamiAnalytics from "@/components/umamiAnalytics"
 import { routing } from "@/i18n/routing"
 
+// Namespaces used by client components. Server components read their
+// translations on the server, so only these need to be sent to the browser.
+// Add to this list when a client component starts using a new namespace
+const CLIENT_NAMESPACES = ["about", "buttons", "common", "office"]
+
 export const metadata: Metadata = {
   title: "UiO Gaming",
   description:
@@ -41,12 +47,15 @@ export default async function RootLayout({
   // [locale] matches any first path segment, e.g. /favicon.txt or /de
   if (!hasLocale(routing.locales, locale)) notFound()
 
-  const messages = (await import(`../../../messages/${locale}.json`)).default
+  const messages = await getMessages()
+  const clientMessages = Object.fromEntries(
+    CLIENT_NAMESPACES.map(namespace => [namespace, messages[namespace]])
+  )
 
   return (
     <html lang={locale}>
       <body>
-        <NextIntlClientProvider locale={locale} messages={messages}>
+        <NextIntlClientProvider locale={locale} messages={clientMessages}>
           <LanguageSelector />
           <main>{children}</main>
           <UmamiAnalytics />