Verknüpfung 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 anstatt zu /fr/about sendet. Dies zieht den Benutzer aus seiner gewä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 sie automatisch jedem href voranzustellen, das sie erhält, wodurch sichergestellt wird, dass alle internen Links korrekt lokalisiert sind.

Schritte

1. Erstellen Sie eine `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 ist (wie /about) oder ein Objekt (wie { pathname: '/about' }) und stellt intelligent die aktuelle lang (z. B. es) voran.

2. Verwenden Sie die Komponente auf Ihren Seiten

Importieren Sie nun auf Ihren Seiten LocalizedLink anstelle des Standard-next/link. Sie können sie genauso verwenden wie die normale Link-Komponente, 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>
  );
}