Создание переключателя языка

Проблема

Пользователь находится на определённой странице, например, /en/products/123, и хочет просмотреть ту же страницу на другом языке. Нажатие на переключатель языка (например, 'Français') часто отправляет его обратно на главную страницу (/fr/), нарушая рабочий процесс и заставляя повторно искать нужную страницу.

Решение

Создайте клиентский компонент, который считывает текущий путь URL. Он генерирует список ссылок для всех других поддерживаемых языков, заменяя текущий языковой сегмент в пути. Также он устанавливает cookie-файл предпочтений при нажатии, чтобы выбор запоминался для будущих посещений.

Шаги

1. Определите конфигурацию языков

Убедитесь, что ваш файл i18n.config.ts включает список локалей и имя cookie, которое вы будете использовать.

// i18n.config.ts

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

2. Создайте компонент переключателя языка

Создайте новый файл, например, app/components/LanguageSwitcher.tsx. Это должен быть клиентский компонент, чтобы использовать хуки, такие как 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();

  // Эта функция устанавливает cookie
  const setLocaleCookie = (locale: string) => {
    document.cookie = `${localeCookieName}=${locale}; path=/; max-age=31536000; samesite=lax`;
  };

  // Эта функция удаляет текущую локаль из пути
  const getRedirectedPath = (locale: string) => {
    if (!pathname) return '/';
    const segments = pathname.split('/');
    segments[1] = locale; // Локаль всегда является первым сегментом
    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. Добавьте переключатель в ваш макет

Импортируйте и разместите ваш новый компонент в корневом файле макета, app/[lang]/layout.tsx. Это сделает его видимым на всех страницах.

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

export async function generateStaticParams() {
  // Это указывает Next.js предварительно отрендерить 'en', 'es' и '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>
          {/* Добавьте переключатель в ваш header или nav */}
          <LanguageSwitcher />
        </header>
        <main>{children}</main>
      </body>
    </html>
  );
}

Теперь, когда пользователь находится на /es/products/123 и нажимает "EN", компонент вычисляет новый путь как /en/products/123 и устанавливает cookie NEXT_LOCALE в значение 'en'.