From 703ab5a32c7b06d6c77fbdb405cc9e718146101a Mon Sep 17 00:00:00 2001 From: Leander Furumo Date: Fri, 30 Oct 2026 22:30:41 +0100 Subject: [PATCH] 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 --- src/app/[locale]/layout.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx index 317a0d9..7ea79f5 100644 --- a/src/app/[locale]/layout.tsx +++ b/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 ( - +
{children}