Language switcher implementation for website

Implementing language switcher on website

Language switcher is a small component, but with nuances: need to preserve current URL when switching language, correctly handle localized slugs and not break SEO with unnecessary redirects.

Basic component

// 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) => {
    // Change locale prefix in current path
    const newPath = pathname.replace(/^\/(ru|en|de|uk)/, `/${locale}`)
    router.push(newPath)
  }

  return (
    <nav aria-label="Language selection">
      <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>
  )
}

Switching with preserved localized path

If page slugs are translated (/en/smart-watch vs /ru/umnye-chasy), simple prefix replacement doesn't work. Need translation table:

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

// Stored in page metadata or passed via props
export function useLocalizedPath(translations: RouteTranslations) {
  return (targetLocale: string): string => {
    return translations[targetLocale] ?? `/${targetLocale}/`
  }
}

// In product page component
const routeTranslations = {
  ru: '/ru/catalog/umnye-chasy',
  en: '/en/catalog/smart-watch',
  de: '/de/katalog/smartwatch',
}

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

On Laravel side, pass data via 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 variant

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="Website language" 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>
  )
}

Saving user choice

// Priority: cookie > localStorage > browser header

// Setting when switching
function setLocalePreference(locale: string) {
  localStorage.setItem('preferred-locale', locale)
  document.cookie = `locale=${locale}; path=/; max-age=${365 * 24 * 3600}; SameSite=Lax`
}

// Reading on initialization
function getLocalePreference(): string | null {
  return localStorage.getItem('preferred-locale')
    ?? document.cookie.match(/locale=([^;]+)/)?.[1]
    ?? null
}

Accessibility

• lang attribute on buttons with foreign languages (screen reader pronounces correctly)
• aria-current="true" on active language
• aria-label on navigation container
• Buttons, not links <a> — AJAX switching doesn't require navigation

Timeframe

Switcher component without localized slugs — half day. With path translation table and data passing from controller — 1 working day.