i18n-Fundament: Cookie-basierte Sprachumschaltung (DE/EN/PL)

Wörterbücher unter lib/i18n statt next-intl (Next.js 16 ist neu genug, dass eine externe Routing-Middleware zusätzliches Risiko bedeutet hätte); Sprache liegt in einem Cookie, kein URL-Präfix nötig, dadurch bleibt proxy.ts unverändert. LocaleProvider stellt Wörterbuch + Sprache per Context für Client-Komponenten bereit (lib/i18n/shared.ts ist bewusst getrennt von lib/i18n/index.ts, damit next/headers nicht in den Client-Bundle gelangt).
2026-07-18 02:08:01 +02:00
parent d96faad4d5
commit 33909c660b
8 changed files with 912 additions and 7 deletions
@@ -0,0 +1,58 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { LOCALES, LOCALE_LABELS } from "@/lib/i18n/shared";
+import type { Locale } from "@/lib/i18n/shared";
+import { useLocale } from "@/components/i18n/LocaleProvider";
+
+export default function LanguageSwitcher({
+  className = "",
+  variant = "dark",
+}: {
+  className?: string;
+  variant?: "dark" | "light";
+}) {
+  const locale = useLocale();
+  const router = useRouter();
+  const [busy, setBusy] = useState(false);
+
+  async function change(next: Locale) {
+    if (next === locale || busy) return;
+    setBusy(true);
+    await fetch("/api/locale", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ locale: next }),
+    });
+    router.refresh();
+    setBusy(false);
+  }
+
+  const activeCls =
+    variant === "dark" ? "bg-white/25 text-white" : "bg-gray-200 text-gray-900";
+  const inactiveCls =
+    variant === "dark"
+      ? "text-white/60 hover:text-white hover:bg-white/10"
+      : "text-gray-400 hover:text-gray-700 hover:bg-gray-100";
+
+  return (
+    <div className={`flex gap-1 text-xs ${className}`} aria-label="Sprache">
+      {LOCALES.map((l) => (
+        <button
+          key={l}
+          type="button"
+          onClick={() => change(l)}
+          disabled={busy}
+          aria-current={l === locale}
+          title={LOCALE_LABELS[l]}
+          className={`rounded px-1.5 py-0.5 uppercase font-semibold transition-colors ${
+            l === locale ? activeCls : inactiveCls
+          }`}
+        >
+          {l}
+        </button>
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,46 @@
+"use client";
+
+// Stellt Sprache + Wörterbuch für Client-Komponenten bereit. Wird einmal
+// im Root-Layout mit dem serverseitig aus dem Cookie gelesenen Locale
+// instanziiert; Client-Komponenten lesen darüber via useDict()/useLocale().
+
+import { createContext, useContext, useMemo } from "react";
+import { formatMessage } from "@/lib/i18n/shared";
+import type { Dict, Locale } from "@/lib/i18n/shared";
+
+interface LocaleContextValue {
+  locale: Locale;
+  dict: Dict;
+}
+
+const LocaleContext = createContext<LocaleContextValue | null>(null);
+
+export function LocaleProvider({
+  locale,
+  dict,
+  children,
+}: LocaleContextValue & { children: React.ReactNode }) {
+  const value = useMemo(() => ({ locale, dict }), [locale, dict]);
+  return (
+    <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>
+  );
+}
+
+function useLocaleContext(): LocaleContextValue {
+  const ctx = useContext(LocaleContext);
+  if (!ctx) throw new Error("useDict/useLocale muss innerhalb von LocaleProvider verwendet werden.");
+  return ctx;
+}
+
+export function useDict(): Dict {
+  return useLocaleContext().dict;
+}
+
+export function useLocale(): Locale {
+  return useLocaleContext().locale;
+}
+
+/** t("Text mit {var}", { var: "Wert" }) für Platzhalter in Übersetzungen. */
+export function useFormatMessage() {
+  return formatMessage;
+}