Wie man die Spracheinstellung in Navigationslinks in Next.js (Pages Router) v16 beibehält

Spracheinstellung bei interner Navigation beibehalten

Problem

Wenn eine Webanwendung die Sprachpräferenz im URL-Pfad codiert, muss jeder interne Link diesen Sprachkontext während der gesamten Benutzersitzung beibehalten. Ohne explizite Locale-Behandlung können Links, die als einfache Pfade geschrieben sind, versehentlich das Sprachpräfix verlieren, was dazu führt, dass Benutzer ihre ausgewählte Sprache während der Navigation verlieren. Dies stört die lokalisierte Erfahrung und zwingt Benutzer, ihre bevorzugte Sprache wiederholt auszuwählen.

Lösung

Stellen Sie sicher, dass jeder interne Navigationslink automatisch die aktuelle Locale enthält, indem sie aus dem Router-Kontext gelesen wird. Der Next.js Pages Router bietet integrierte Locale-Unterstützung durch sein Routing-System, wobei die aktive Locale über den useRouter-Hook verfügbar ist. Standardmäßig behält die Link-Komponente die aktuelle Locale während Client-seitiger Übergänge bei, aber das Verständnis dieses Verhaltens und die konsequente Anwendung in der gesamten Anwendung gewährleistet eine nahtlose Locale-bewusste Navigation.

Schritte

1. Zugriff auf die aktuelle Locale vom Router

Der useRouter-Hook stellt locale (die aktuell aktive Locale), locales (alle konfigurierten Locales) und defaultLocale (die konfigurierte Standard-Locale) 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 Locale aus dem Router und macht sie für die Verwendung in der Navigationslogik verfügbar.

Wenn keine Locale-Prop an Link übergeben wird, wird die aktuell aktive Locale während Client-Übergängen 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 Locale bei. Wenn der Benutzer /fr/products betrachtet, navigiert ein Klick auf "About" zu /fr/about.

Für Fälle, in denen Sie explizite Kontrolle benötigen oder die Locale-Handhabung 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 mit zusätzlicher locale-spezifischer Logik erweitert werden.

4. Programmatische Navigation mit Locale-Beibehaltung handhaben

Bei direkter Verwendung von Router-Methoden können Sie die Locale über die Übergangsoptionen 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 deren integriertes Verhalten zur Locale-Beibehaltung.

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 Präfix der aktuellen Locale, wodurch Benutzer bei der Navigation durch die Anwendung in ihrer ausgewählten Sprache bleiben.