Реализация переключения языка на сайте

Реализация переключения языка на сайте

Переключатель языка — небольшой компонент, но с нюансами: нужно сохранять текущий URL при смене языка, корректно обрабатывать локализованные slug'и и не ломать SEO лишними редиректами.

Базовый компонент

// components/LanguageSwitcher.tsx
import { useRouter, usePathname } from 'next/navigation'

const LOCALES = [
  { code: 'ru', label: 'Русский', flag: '🇷🇺' },
  { code: 'en', label: 'English', flag: '🇬🇧' },
  { code: 'de', label: 'Deutsch', flag: '🇩🇪' },
  { code: 'uk', label: 'Українська', flag: '🇺🇦' },
]

export function LanguageSwitcher({ currentLocale }: { currentLocale: string }) {
  const router = useRouter()
  const pathname = usePathname()

  const switchLocale = (locale: string) => {
    // Меняем префикс локали в текущем пути
    const newPath = pathname.replace(/^\/(ru|en|de|uk)/, `/${locale}`)
    router.push(newPath)
  }

  return (
    <nav aria-label="Выбор языка">
      <ul className="flex gap-2">
        {LOCALES.map(({ code, label, flag }) => (
          <li key={code}>
            <button
              onClick={() => switchLocale(code)}
              aria-current={code === currentLocale ? 'true' : undefined}
              className={code === currentLocale ? 'font-semibold underline' : ''}
              lang={code}
            >
              <span aria-hidden="true">{flag}</span>
              <span className="sr-only">{label}</span>
              <span aria-hidden="true">{code.toUpperCase()}</span>
            </button>
          </li>
        ))}
      </ul>
    </nav>
  )
}

Переключение с сохранением локализованного пути

Если slug'и страниц переведены (/en/smart-watch vs /ru/umnye-chasy), простая замена префикса не работает. Нужна таблица соответствий:

// hooks/useLocalizedPath.ts
interface RouteTranslations {
  [locale: string]: string
}

// Хранится в meta-данных страницы или передаётся через props
export function useLocalizedPath(translations: RouteTranslations) {
  return (targetLocale: string): string => {
    return translations[targetLocale] ?? `/${targetLocale}/`
  }
}

// В компоненте страницы продукта
const routeTranslations = {
  ru: '/ru/catalog/umnye-chasy',
  en: '/en/catalog/smart-watch',
  de: '/de/katalog/smartwatch',
}

<LanguageSwitcher
  currentLocale="ru"
  getLocalizedPath={useLocalizedPath(routeTranslations)}
/>

На стороне Laravel эти данные можно передать через Inertia props:

// ProductController
return Inertia::render('Product/Show', [
    'product' => $product,
    'localizedUrls' => [
        'ru' => route('product', ['locale' => 'ru', 'slug' => $product->translate('ru')->slug]),
        'en' => route('product', ['locale' => 'en', 'slug' => $product->translate('en')->slug]),
        'de' => route('product', ['locale' => 'de', 'slug' => $product->translate('de')->slug]),
    ],
]);

Dropdown-вариант

import * as Select from '@radix-ui/react-select'

export function LanguageDropdown({ current, onChange }: {
  current: string
  onChange: (locale: string) => void
}) {
  const current_locale = LOCALES.find(l => l.code === current)

  return (
    <Select.Root value={current} onValueChange={onChange}>
      <Select.Trigger aria-label="Язык сайта" className="flex items-center gap-2 px-3 py-1.5 border rounded">
        <Select.Value>
          {current_locale?.flag} {current_locale?.code.toUpperCase()}
        </Select.Value>
        <Select.Icon>▾</Select.Icon>
      </Select.Trigger>

      <Select.Portal>
        <Select.Content className="bg-white border rounded shadow-md z-50">
          <Select.Viewport>
            {LOCALES.map(({ code, label, flag }) => (
              <Select.Item
                key={code}
                value={code}
                className="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-muted"
              >
                <span aria-hidden="true">{flag}</span>
                <Select.ItemText>{label}</Select.ItemText>
              </Select.Item>
            ))}
          </Select.Viewport>
        </Select.Content>
      </Select.Portal>
    </Select.Root>
  )
}

Сохранение выбора пользователя

// Приоритет: cookie > localStorage > заголовок браузера

// Установка при переключении
function setLocalePreference(locale: string) {
  localStorage.setItem('preferred-locale', locale)
  document.cookie = `locale=${locale}; path=/; max-age=${365 * 24 * 3600}; SameSite=Lax`
}

// Чтение при инициализации
function getLocalePreference(): string | null {
  return localStorage.getItem('preferred-locale')
    ?? document.cookie.match(/locale=([^;]+)/)?.[1]
    ?? null
}

Доступность

• Атрибут lang на кнопках с иностранными языками (скринридер произнесёт название правильно)
• aria-current="true" на активном языке
• aria-label на контейнере навигации
• Кнопки, не ссылки <a> — AJAX-переключение не требует перехода

Сроки

Компонент-переключатель без локализованных slug'ов — полдня. С таблицей переводов путей и передачей данных из контроллера — 1 рабочий день.