Implement internationalization support across components

- Integrated `next-intl` for toast messages and locale handling in various components, including `Providers`, `CanvasUserMenu`, and `CreditOverview`. - Replaced hardcoded strings with translation keys to enhance localization capabilities. - Updated `RootLayout` to dynamically set the language attribute based on the user's locale. - Ensured consistent user feedback through localized toast messages in actions such as sign-out, canvas operations, and billing notifications.
2026-04-01 18:16:52 +02:00
parent 6ce1d4a82e
commit 79d9092d43
44 changed files with 1385 additions and 507 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils";
 import { Providers } from "@/components/providers";
 import { InitUser } from "@/components/init-user";
 import { getAuthUser, getToken } from "@/lib/auth-server";
+import { getLocale, getMessages } from "next-intl/server";

 const manrope = Manrope({ subsets: ["latin"], variable: "--font-sans" });

@@ -20,6 +21,8 @@ export default async function RootLayout({
  children: React.ReactNode;
 }>) {
  const initialToken = await getToken();
+  const locale = await getLocale();
+  const messages = await getMessages();
  const user = await getAuthUser();
  if (user) {
    const id = user.userId ?? String(user._id);
@@ -33,7 +36,7 @@ export default async function RootLayout({

  return (
    <html
-      lang="de"
+      lang={locale}
      suppressHydrationWarning
      className={cn("h-full", "antialiased", "font-sans", manrope.variable)}
    >
@@ -56,7 +59,7 @@ export default async function RootLayout({
        ></script>
      </head>
      <body className="min-h-full flex flex-col">
-        <Providers initialToken={initialToken}>
+        <Providers initialToken={initialToken} locale={locale} messages={messages}>
          <InitUser />
          {children}
        </Providers>