Einen Sprachumschalter erstellen

Problem

Ein Benutzer befindet sich auf einer bestimmten Seite, wie z.B. /en/products/123, und möchte dieselbe Seite in einer anderen Sprache anzeigen. Wenn er auf einen Sprachumschalter klickt (z.B. 'Français'), wird er oft zurück zur Startseite (/fr/) geleitet, anstatt zur entsprechenden Produktseite, was seinen Arbeitsablauf unterbricht und ihn zwingt, erneut zu navigieren.

Lösung

Erstellen Sie eine Client-Komponente, die den aktuellen URL-Pfadnamen liest. Sie generiert eine Liste von Links für alle anderen unterstützten Sprachen, indem sie das aktuelle Sprachsegment im Pfad ersetzt. Außerdem wird beim Klicken ein Präferenz-Cookie gesetzt, um sicherzustellen, dass die Auswahl für zukünftige Besuche gespeichert wird.

Schritte

1. Definieren Sie Ihre Sprachkonfiguration

Stellen Sie sicher, dass Ihre Datei i18n.config.ts die Liste der Locales und den Namen des Cookies enthält, den Sie verwenden werden.

// i18n.config.ts

export const locales = ['en', 'es', 'fr'];
export const defaultLocale = 'en';
export const localeCookieName = 'NEXT_LOCALE';

2. Erstellen Sie die Sprachumschalter-Komponente

Erstellen Sie eine neue Datei, zum Beispiel app/components/LanguageSwitcher.tsx. Dies muss eine Client-Komponente sein, um Hooks wie usePathname zu verwenden.

// app/components/LanguageSwitcher.tsx
'use client';

import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { locales, localeCookieName } from '@/i18n.config';

export default function LanguageSwitcher() {
  const pathname = usePathname();

  // Diese Funktion setzt das Cookie
  const setLocaleCookie = (locale: string) => {
    document.cookie = `${localeCookieName}=${locale}; path=/; max-age=31536000; samesite=lax`;
  };

  // Diese Funktion entfernt das aktuelle Locale aus dem Pfad
  const getRedirectedPath = (locale: string) => {
    if (!pathname) return '/';
    const segments = pathname.split('/');
    segments[1] = locale; // Das Locale ist immer das erste Segment
    return segments.join('/');
  };

  return (
    <div>
      {locales.map((locale) => (
        <Link
          key={locale}
          href={getRedirectedPath(locale)}
          onClick={() => setLocaleCookie(locale)}
          style={{
            display: 'inline-block',
            padding: '0.5rem',
            textDecoration: 'underline',
          }}
        >
          {locale.toUpperCase()}
        </Link>
      ))}
    </div>
  );
}

3. Fügen Sie den Umschalter zu Ihrem Layout hinzu

Importieren und platzieren Sie Ihre neue Komponente in der Root-Layout-Datei, app/[lang]/layout.tsx. Dadurch wird sie auf allen Seiten sichtbar.

// app/[lang]/layout.tsx
import LanguageSwitcher from '@/app/components/LanguageSwitcher';

export async function generateStaticParams() {
  // This tells Next.js to pre-render 'en', 'es', and 'fr'
  return [{ lang: 'en' }, { lang: 'es' }, { lang: 'fr' }];
}

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>
        <header>
          {/* Add the switcher to your header or nav */}
          <LanguageSwitcher />
        </header>
        <main>{children}</main>
      </body>
    </html>
  );
}

Wenn ein Benutzer nun auf /es/products/123 ist und auf "EN" klickt, berechnet die Komponente den neuen Pfad als /en/products/123 und setzt den NEXT_LOCALE Cookie auf 'en'.