Verlinkung zwischen lokalisierten Seiten

Problem

Wenn Sprachcodes Teil der URL sind, wird das Erstellen interner Links komplex. Ein einfacher Link wie <a href="/about"> ist falsch, da er die lokalisierte Route unterbricht und einen Benutzer von /fr/contact zu /about statt zu /fr/about leitet. Dies führt den Benutzer aus seiner ausgewählten Sprache heraus.

Lösung

Erstellen Sie eine benutzerdefinierte Wrapper-Komponente um die Next.js Link-Komponente. Diese neue Komponente verwendet den useParams-Hook, um die aktuelle Sprache aus der URL zu erhalten und fügt sie automatisch jedem empfangenen href voran, wodurch sichergestellt wird, dass alle internen Links korrekt lokalisiert sind.

Schritte

1. Erstellen einer `LocalizedLink`-Komponente

Erstellen Sie eine neue Datei app/components/LocalizedLink.tsx. Dies muss eine Client-Komponente sein, um den useParams-Hook zu verwenden.

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

import Link from 'next/link';
import { useParams } from 'next/navigation';
import type { ComponentProps } from 'react';

type LinkProps = ComponentProps<typeof Link>;

export default function LocalizedLink({ href, ...rest }: LinkProps) {
  const params = useParams();
  const lang = params.lang as string;

  let localizedHref = href;

  // Check if href is a string and needs prefixing
  if (typeof href === 'string' && href.startsWith('/')) {
    localizedHref = `/${lang}${href}`;
  } else if (
    typeof href === 'object' &&
    href !== null &&
    href.pathname?.startsWith('/')
  ) {
    // Re-create the object with a prefixed pathname
    localizedHref = {
      ...href,
      pathname: `/${lang}${href.pathname}`,
    };
  }
  // Absolute URLs or other cases are passed through

  return <Link href={localizedHref} {...rest} />;
}

Diese Komponente importiert die Standard-Link-Props. Sie prüft, ob href ein String (wie /about) oder ein Objekt (wie { pathname: '/about' }) ist und fügt intelligent den aktuellen lang-Parameter (z.B. es) davor ein.

2. Verwenden Sie die Komponente auf Ihren Seiten

Importieren Sie nun in Ihren Seiten LocalizedLink anstelle des Standard-next/link. Sie können es genauso verwenden wie die normale Link-Komponente, aber ohne sich um das Sprachpräfix kümmern zu müssen.

// app/[lang]/page.tsx
import LocalizedLink from '@/app/components/LocalizedLink';

export default function Home({ params }: { params: { lang: string } }) {
  return (
    <div>
      <h1>Home page</h1>
      <p>Current language: {params.lang}</p>
      
      <nav>
        <ul>
          <li>
            {/* This will render as /en/about or /es/about, etc. */}
            <LocalizedLink href="/about">About page</LocalizedLink>
          </li>
          <li>
            {/* This also works */}
            <LocalizedLink href={{ pathname: '/contact' }}>
              Contact page
            </LocalizedLink>
          </li>
        </ul>
      </nav>
    </div>
  );
}