So behält man die Sprache in Navigationslinks in Next.js (Pages Router) v16 bei

Sprache über interne Navigation hinweg beibehalten

Problem

Wenn eine Webanwendung die Sprachpräferenz im URL-Pfad kodiert, muss jeder interne Link diesen Sprachkontext während der gesamten Sitzung des Benutzers beibehalten. Ohne explizite Sprachbehandlung können Links, die als reine Pfade geschrieben sind, versehentlich das Sprachpräfix verlieren, wodurch Benutzer ihre ausgewählte Sprache mitten in der Navigation verlieren. Dies stört das lokalisierte Erlebnis und zwingt Benutzer dazu, ihre bevorzugte Sprache wiederholt auszuwählen.

Lösung

Stellen Sie sicher, dass jeder interne Navigationslink automatisch die aktuelle Sprache einschließt, indem diese aus dem Router-Kontext gelesen wird. Next.js Pages Router bietet integrierte Sprachunterstützung durch sein Routing-System, wobei die aktive Sprache über den useRouter-Hook verfügbar ist. Standardmäßig behält die Link-Komponente die aktuelle Sprache während clientseitiger Übergänge bei, aber das Verständnis dieses Verhaltens und dessen konsistente Anwendung in der gesamten Anwendung gewährleistet eine nahtlose sprachbewusste Navigation.

Schritte

1. Auf die aktuelle Sprache über den Router zugreifen

Der useRouter-Hook stellt locale (die aktuell aktive Sprache), locales (alle konfigurierten Sprachen) und defaultLocale (die konfigurierte Standardsprache) bereit.

import { useRouter } from "next/router";

export default function Navigation() {
  const router = useRouter();
  const currentLocale = router.locale;

  return (
    <nav>
      <p>Current locale: {currentLocale}</p>
    </nav>
  );
}

Diese Komponente liest die aktive Sprache aus dem Router und macht sie für die Verwendung in der Navigationslogik verfügbar.

Wenn kein Locale-Prop für Link angegeben wird, wird die aktuell aktive Sprache während clientseitiger Übergänge verwendet.

import Link from "next/link";

export default function Navigation() {
  return (
    <nav>
      <Link href="/about">About</Link>
      <Link href="/products">Products</Link>
      <Link href="/contact">Contact</Link>
    </nav>
  );
}

Diese Links behalten automatisch die aktuelle Sprache bei. Wenn der Benutzer /fr/products betrachtet, führt ein Klick auf „About" zu /fr/about.

Für Fälle, in denen Sie explizite Kontrolle benötigen oder die Locale-Behandlung sichtbarer machen möchten, erstellen Sie eine Wrapper-Komponente, die die aktuelle Locale explizit übergibt.

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

interface LocaleLinkProps {
  href: string;
  children: ReactNode;
}

export function LocaleLink({ href, children }: LocaleLinkProps) {
  const { locale } = useRouter();

  return (
    <Link href={href} locale={locale}>
      {children}
    </Link>
  );
}

Diese Komponente macht die Locale-Beibehaltung explizit und kann bei Bedarf um zusätzliche locale-spezifische Logik erweitert werden.

4. Behandeln Sie programmatische Navigation mit Locale-Beibehaltung

Wenn Sie Router-Methoden direkt verwenden, können Sie die Locale über die Transition-Optionen angeben oder alle Routing-Informationen einschließlich der Locale beibehalten, indem Sie den href-Parameter als Objekt übergeben.

import { useRouter } from "next/router";

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

  const handleNavigate = () => {
    router.push({ pathname: "/dashboard", query }, asPath, { locale });
  };

  return <button onClick={handleNavigate}>Go to Dashboard</button>;
}

Dieses Muster stellt sicher, dass die programmatische Navigation die aktuelle Locale und alle vorhandenen Query-Parameter beibehält.

Verwenden Sie die Standard-Link-Komponente in Ihrer gesamten Anwendung und verlassen Sie sich auf ihr integriertes Locale-Beibehaltungsverhalten.

import Link from "next/link";

export default function ProductCard({ productId }: { productId: string }) {
  return (
    <article>
      <h2>Product {productId}</h2>
      <Link href={`/products/${productId}`}>View Details</Link>
      <Link href="/products">Back to Products</Link>
    </article>
  );
}

Sowohl statische als auch dynamische Routen enthalten automatisch das aktuelle Locale-Präfix und halten Benutzer in ihrer ausgewählten Sprache, während sie durch die Anwendung navigieren.