Liaison entre pages localisées

Problème

Lorsque les codes de langue font partie de l'URL, la création de liens internes devient complexe. Un simple lien comme <a href="/about"> est incorrect, car il casse la route localisée, envoyant un utilisateur de /fr/contact vers /about au lieu de /fr/about. Cela fait sortir l'utilisateur de sa langue sélectionnée.

Solution

Créer un composant wrapper personnalisé autour du composant Link de Next.js. Ce nouveau composant utilisera le hook useParams pour obtenir la langue actuelle depuis l'URL et la préfixer automatiquement à tout href qu'il reçoit, garantissant que tous les liens internes sont correctement localisés.

Étapes

1. Créer un composant `LocalizedLink`

Créer un nouveau fichier app/components/LocalizedLink.tsx. Ce doit être un composant client pour utiliser le hook useParams.

// 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} />;
}

Ce composant importe les props standard de Link. Il vérifie si href est une chaîne (comme /about) ou un objet (comme { pathname: '/about' }) et préfixe intelligemment la lang actuelle (par exemple, es).

2. Utiliser le composant sur vos pages

Maintenant, dans vos pages, importez LocalizedLink au lieu du next/link standard. Vous pouvez l'utiliser exactement comme vous utiliseriez le composant Link normal, mais sans vous soucier du préfixe de langue.

// 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>
  );
}