Sprachwechsel

Implementieren Sie Sprachumschalter, damit Benutzer ihre bevorzugte Sprache ändern können.

Grundlegende Implementierung

Verwenden Sie den useLingoContext-Hook, um die aktuelle Locale und eine Funktion zum Ändern zu erhalten:

"use client"; // For Next.js

import { useLingoContext } from "@lingo.dev/compiler/react";

export function LanguageSwitcher() {
  const { locale, setLocale } = useLingoContext();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="de">Deutsch</option>
      <option value="fr">Français</option>
    </select>
  );
}

Wenn setLocale() aufgerufen wird:

  1. Die neue Sprache wird gespeichert (über einen benutzerdefinierten Resolver oder das Standard-Cookie)
  2. Die Seite wird neu geladen, um die neue Sprache anzuwenden

Benutzerdefinierte Benutzeroberfläche

"use client";

import { useLingoContext } from "@lingo.dev/compiler/react";

const locales = [
  { code: "en", name: "English", flag: "🇺🇸" },
  { code: "es", name: "Español", flag: "🇪🇸" },
  { code: "de", name: "Deutsch", flag: "🇩🇪" },
  { code: "fr", name: "Français", flag: "🇫🇷" },
];

export function LanguageSwitcher() {
  const { locale: currentLocale, setLocale } = useLingoContext();

  return (
    <div className="relative">
      <select
        value={currentLocale}
        onChange={(e) => setLocale(e.target.value)}
        className="px-4 py-2 border rounded-md"
      >
        {locales.map((locale) => (
          <option key={locale.code} value={locale.code}>
            {locale.flag} {locale.name}
          </option>
        ))}
      </select>
    </div>
  );
}

Button-Gruppe

"use client";

import { useLingoContext } from "@lingo.dev/compiler/react";

export function LanguageSwitcher() {
  const { locale, setLocale } = useLingoContext();

  const locales = ["en", "es", "de", "fr"];

  return (
    <div className="flex gap-2">
      {locales.map((loc) => (
        <button
          key={loc}
          onClick={() => setLocale(loc)}
          className={`px-3 py-1 rounded ${
            locale === loc ? "bg-blue-500 text-white" : "bg-gray-200"
          }`}
        >
          {loc.toUpperCase()}
        </button>
      ))}
    </div>
  );
}

"use client";

import { useState } from "react";
import { useLingoContext } from "@lingo.dev/compiler/react";

export function LanguageSwitcher() {
  const { locale, setLocale } = useLingoContext();
  const [isOpen, setIsOpen] = useState(false);

  const locales = [
    { code: "en", name: "English" },
    { code: "es", name: "Español" },
    { code: "de", name: "Deutsch" },
    { code: "fr", name: "Français" },
  ];

  const currentLocaleName = locales.find((l) => l.code === locale)?.name;

  return (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="px-4 py-2 border rounded-md flex items-center gap-2"
      >
        <span>{currentLocaleName}</span>
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </button>

      {isOpen && (
        <div className="absolute top-full mt-2 bg-white border rounded-md shadow-lg">
          {locales.map((loc) => (
            <button
              key={loc.code}
              onClick={() => {
                setLocale(loc.code);
                setIsOpen(false);
              }}
              className={`block w-full text-left px-4 py-2 hover:bg-gray-100 ${
                locale === loc.code ? "bg-blue-50" : ""
              }`}
            >
              {loc.name}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

Persistierung

Standardmäßig verwendet setLocale() Ihre konfigurierte Sprachpersistierung (standardmäßig Cookie).

Benutzerdefinierte Persistierung

Implementieren Sie benutzerdefinierte Persistierung über benutzerdefinierte Locale-Resolver:

// .lingo/locale-resolver.client.ts
export function persistLocale(locale: string): void {
  // Custom logic: localStorage, URL params, API call, etc.
  localStorage.setItem("locale", locale);
  window.location.reload();
}

setLocale() ruft automatisch Ihre Funktion persistLocale() auf.

Vermeidung des Seitenneuladen

Standardmäßig lädt setLocale() die Seite neu, um die neue Sprache anzuwenden. Um das Neuladen zu vermeiden:

  1. Verwenden Sie clientseitiges State-Management
  2. Laden Sie Übersetzungen für alle Sprachen vorab
  3. Wechseln Sie Übersetzungen ohne Seitenneuladung

Hinweis: Dies erfordert eine benutzerdefinierte Implementierung – das Standardverhalten des Compilers lädt die Seite aus Gründen der Einfachheit neu.

URL-basierter Sprachwechsel

Für URL-basiertes Sprach-Routing (/en/about, /es/about):

"use client";

import { useRouter, usePathname } from "next/navigation";

export function LanguageSwitcher() {
  const router = useRouter();
  const pathname = usePathname();

  // Extract current locale from path: /es/about → es
  const currentLocale = pathname.split("/")[1];

  function switchLocale(newLocale: string) {
    // Replace locale in path: /es/about → /de/about
    const newPath = pathname.replace(`/${currentLocale}`, `/${newLocale}`);
    router.push(newPath);
  }

  return (
    <select value={currentLocale} onChange={(e) => switchLocale(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

Subdomain-basiertes Umschalten

Für Subdomain-basiertes Routing (es.example.com):

"use client";

export function LanguageSwitcher() {
  const currentLocale = window.location.hostname.split(".")[0];

  function switchLocale(newLocale: string) {
    const host = window.location.hostname;
    const domain = host.split(".").slice(1).join(".");
    const newHost = `${newLocale}.${domain}`;

    window.location.href = `${window.location.protocol}//${newHost}${window.location.pathname}`;
  }

  return (
    <select value={currentLocale} onChange={(e) => switchLocale(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

Native Sprachnamen

Zeigen Sie Sprachnamen in ihrer nativen Sprache an für bessere UX:

const locales = [
  { code: "en", name: "English" },
  { code: "es", name: "Español" },
  { code: "de", name: "Deutsch" },
  { code: "fr", name: "Français" },
  { code: "ja", name: "日本語" },
  { code: "zh", name: "中文" },
  { code: "ar", name: "العربية" },
  { code: "ru", name: "Русский" },
];

Barrierefreiheit

Machen Sie Ihren Sprachumschalter barrierefrei:

const { locale, setLocale } = useLingoContext();

<div role="group" aria-label="Language selector">
  <label htmlFor="language-select" className="sr-only">
    Choose language
  </label>
  <select
    id="language-select"
    value={locale}
    onChange={(e) => setLocale(e.target.value)}
    aria-label="Select language"
  >
    {locales.map((loc) => (
      <option key={loc.code} value={loc.code}>
        {loc.name}
      </option>
    ))}
  </select>
</div>

Gängige Muster

export function Navbar() {
  return (
    <nav className="flex items-center justify-between p-4">
      <Logo />
      <div className="flex items-center gap-4">
        <NavLinks />
        <LanguageSwitcher />
      </div>
    </nav>
  );
}

export function Footer() {
  return (
    <footer className="p-4 border-t">
      <div className="flex justify-between items-center">
        <p>© 2024 Your Company</p>
        <LanguageSwitcher />
      </div>
    </footer>
  );
}

Mobile-Menü

export function MobileMenu() {
  return (
    <div className="mobile-menu">
      <NavLinks />
      <div className="border-t pt-4 mt-4">
        <p className="text-sm text-gray-500 mb-2">Language</p>
        <LanguageSwitcher />
      </div>
    </div>
  );
}

Testen

Testen Sie das Locale-Umschalten in der Entwicklung:

  1. Language-Switcher-Komponente hinzufügen
  2. Dev-Server starten
  3. Klicken, um Locales umzuschalten
  4. Überprüfen, dass die Seite mit neuem Locale neu lädt
  5. Prüfen, dass Übersetzungen aktualisiert werden

Mit aktiviertem Pseudotranslator sehen Sie sofort gefälschte Übersetzungen.

Häufige Fragen

Warum lädt die Seite neu? Der Compiler lädt die Seite neu, um das neue Locale anzuwenden. Dies stellt sicher, dass alle Server-Komponenten und Metadaten korrekt aktualisiert werden.

Kann ich das Neuladen vermeiden? Ja, erfordert aber eine benutzerdefinierte Implementierung. Laden Sie alle Übersetzungen vorab und verwalten Sie den Client-seitigen State manuell.

Muss ich LanguageSwitcher in Suspense einbetten? Nein. useLingoContext ist synchron – kein Suspense erforderlich.

Kann ich die Browsersprache der Benutzer automatisch erkennen? Ja. Implementieren Sie dies in Custom Locale Resolvers:

export function getClientLocale(): string {
  return navigator.language.split("-")[0] || "en";
}

Sollte ich alle unterstützten Sprachen oder nur einige wenige anzeigen? Zeigen Sie alle in einem Dropdown-Menü an. Bei vielen Sprachen gruppieren Sie nach Region oder verwenden Sie eine Such-/Filter-UI.

Nächste Schritte