Créer un sélecteur de langue

Problème

Un utilisateur se trouve sur une page spécifique, telle que /en/products/123, et souhaite consulter la même page dans une autre langue. En cliquant sur un sélecteur de langue (par exemple, « Français »), il est souvent redirigé vers la page d'accueil (/fr/) au lieu de la page produit correspondante, ce qui interrompt son parcours et l'oblige à naviguer à nouveau.

Solution

Créez un composant client qui lit le chemin d'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éfinissez 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éez le composant de sélecteur de langue

Créez un nouveau fichier, par exemple, app/components/LanguageSwitcher.tsx. Il doit s'agir d'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();

  // This function sets the cookie
  const setLocaleCookie = (locale: string) => {
    document.cookie = `${localeCookieName}=${locale}; path=/; max-age=31536000; samesite=lax`;
  };

  // This function strips the current locale from the path
  const getRedirectedPath = (locale: string) => {
    if (!pathname) return '/';
    const segments = pathname.split('/');
    segments[1] = locale; // The locale is always the first 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 layout

Importez et placez votre nouveau composant dans le fichier de layout 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() {
  // 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>
  );
}

Désormais, lorsqu'un utilisateur se trouve 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 ».