Création d'un sélecteur de langue

Problème

Un utilisateur se trouve sur une page spécifique, comme /en/products/123, et souhaite consulter la même page dans une autre langue. Cliquer sur un sélecteur de langue (par exemple, 'Français') l'envoie souvent vers la page d'accueil (/fr/) au lieu de la page produit correspondante, interrompant ainsi son flux de travail et l'obligeant à naviguer à nouveau.

Solution

Créer un composant client qui lit le chemin URL actuel. Il génère une liste de liens pour toutes les autres langues prises en charge en remplaçant le segment de langue actuel dans le chemin. Il définit également un cookie de préférence lors du clic, garantissant que le choix est mémorisé pour les visites futures.

Étapes

1. Définir votre configuration de langue

Assurez-vous que votre fichier i18n.config.ts inclut la liste des locales et le nom du cookie que vous utiliserez.

// i18n.config.ts

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

2. Créer le composant de sélection de langue

Créez un nouveau fichier, par exemple, app/components/LanguageSwitcher.tsx. Ce doit être un composant client pour utiliser des hooks comme usePathname.

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

  // Cette fonction définit le cookie
  const setLocaleCookie = (locale: string) => {
    document.cookie = `${localeCookieName}=${locale}; path=/; max-age=31536000; samesite=lax`;
  };

  // Cette fonction supprime la locale actuelle du chemin
  const getRedirectedPath = (locale: string) => {
    if (!pathname) return '/';
    const segments = pathname.split('/');
    segments[1] = locale; // La locale est toujours le premier 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. Ajoutez le sélecteur à votre mise en page

Importez et placez votre nouveau composant dans le fichier de mise en page racine, app/[lang]/layout.tsx. Cela le rend visible sur toutes les pages.

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

export async function generateStaticParams() {
  // Ceci indique à Next.js de pré-rendre 'en', 'es', et '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>
          {/* Ajoutez le sélecteur à votre en-tête ou navigation */}
          <LanguageSwitcher />
        </header>
        <main>{children}</main>
      </body>
    </html>
  );
}

Maintenant, lorsqu'un utilisateur est sur /es/products/123 et clique sur "EN", le composant calcule le nouveau chemin comme /en/products/123 et définit le cookie NEXT_LOCALE sur 'en'.