Wie man eine Sprachumschalter-Komponente in Next.js (Pages Router) v16 erstellt

Problem

Benutzer erwarten, dass Sprachumschalter ihren aktuellen Standort beibehalten. Wenn jemand eine Produktseite auf Englisch betrachtet und auf Spanisch umschaltet, möchte er dieselbe Produktseite auf Spanisch sehen und nicht zur Startseite weitergeleitet werden. Das Brechen dieser Erwartung erzeugt Reibung und zwingt Benutzer, dorthin zurückzunavigieren, wo sie waren, was die Erfahrung verschlechtert und möglicherweise dazu führt, dass sie die Aufgabe ganz abbrechen.

Viele Implementierungen von Sprachumschaltern scheitern, weil sie die Sprachauswahl als einfache Navigation behandeln und nicht als Transformation der aktuellen Ansicht. Ohne Zugriff auf die Routing-Informationen der aktuellen Seite kann ein Umschalter nur zu festen Zielen verlinken und verliert dabei den Kontext des Benutzers.

Lösung

Erstellen Sie einen Sprachumschalter, der den Pfadnamen und die Abfrageparameter der aktuellen Route aus dem Router liest und dann Links für jede unterstützte Sprache generiert, die diese Routing-Informationen beibehalten und nur die Locale ändern. Indem der Pfadname und die Abfrage zusammen mit der Ziel-Locale an die Navigations-API übergeben werden, stellt der Umschalter sicher, dass Benutzer auf der entsprechenden Seite in der neuen Sprache bleiben.

Schritte

1. Erstellen Sie eine Sprachumschalter-Komponente, die die aktuelle Route liest

Das Router-Objekt stellt die Eigenschaften pathname, asPath, query, locale und locales bereit, die alle Informationen enthalten, die zum Erstellen von Locale-bewussten Links benötigt werden.

import { useRouter } from "next/router";
import Link from "next/link";

export default function LanguageSwitcher() {
  const router = useRouter();
  const { locale, locales, pathname, asPath, query } = router;

  return (
    <nav>
      {locales?.map((loc) => (
        <Link key={loc} href={{ pathname, query }} as={asPath} locale={loc}>
          {loc.toUpperCase()}
        </Link>
      ))}
    </nav>
  );
}

Die Link-Komponente akzeptiert eine locale-Prop, um zu einer anderen Locale als der aktuell aktiven zu wechseln. Die Übergabe von pathname und query als Objekt an href bewahrt alle Routing-Informationen einschließlich dynamischer Routenabfragewerte.

2. Aktive Sprache stylen, um visuelles Feedback zu geben

Heben Sie die aktuelle Sprache hervor, damit Benutzer wissen, welche Sprache sie gerade anzeigen.

import { useRouter } from "next/router";
import Link from "next/link";

export default function LanguageSwitcher() {
  const router = useRouter();
  const { locale, locales, pathname, asPath, query } = router;

  return (
    <nav>
      {locales?.map((loc) => {
        const isActive = loc === locale;
        return (
          <Link
            key={loc}
            href={{ pathname, query }}
            as={asPath}
            locale={loc}
            style={{
              fontWeight: isActive ? "bold" : "normal",
              textDecoration: isActive ? "none" : "underline",
              marginRight: "1rem",
            }}
          >
            {loc.toUpperCase()}
          </Link>
        );
      })}
    </nav>
  );
}

Durch den Vergleich jeder Sprache mit dem aktuellen locale-Wert wird die aktive Sprache identifiziert und ein spezielles Styling angewendet, um sie von den verfügbaren Alternativen zu unterscheiden.

3. Barrierefreie Labels mit react-intl hinzufügen

Ersetzen Sie Sprachcodes durch menschenlesbare Sprachnamen für eine bessere Benutzerfreundlichkeit.

import { useRouter } from "next/router";
import { useIntl } from "react-intl";
import Link from "next/link";

const localeNames: Record<string, string> = {
  en: "English",
  es: "Español",
  fr: "Français",
  de: "Deutsch",
};

export default function LanguageSwitcher() {
  const router = useRouter();
  const intl = useIntl();
  const { locale, locales, pathname, asPath, query } = router;

  return (
    <nav
      aria-label={intl.formatMessage({
        id: "languageSwitcher.label",
        defaultMessage: "Select language",
      })}
    >
      {locales?.map((loc) => {
        const isActive = loc === locale;
        return (
          <Link
            key={loc}
            href={{ pathname, query }}
            as={asPath}
            locale={loc}
            aria-current={isActive ? "true" : undefined}
            style={{
              fontWeight: isActive ? "bold" : "normal",
              textDecoration: isActive ? "none" : "underline",
              marginRight: "1rem",
            }}
          >
            {localeNames[loc] || loc}
          </Link>
        );
      })}
    </nav>
  );
}

Der useIntl-Hook bietet Zugriff auf Formatierungsfunktionen zur Übersetzung von UI-Labels. Die Attribute aria-label und aria-current verbessern die Barrierefreiheit für Screenreader-Benutzer.