Přepínání jazyků

Alfa

Lingo.dev Compiler je v alfa verzi. Je nestabilní, nedoporučuje se pro produkční nasazení a API se mohou mezi vydáními měnit.

Lingo.dev Compiler poskytuje hook useLingoContext() pro čtení a změnu aktivního jazyka za běhu. Využijete ho při vytváření přepínačů jazyků, komponent reagujících na jazyk nebo jakéhokoli UI, které zohledňuje jazykové preference uživatele.

Hook useLingoContext()#

Hook vrací objekt s aktuálním jazykem a funkcí pro jeho změnu:

tsx

import { useLingoContext } from "@lingo.dev/compiler/react";

const { locale, setLocale } = useLingoContext();

Vlastnost	Typ	Popis
`locale`	`string`	Kód aktivního jazyka (např. `"en"`, `"es"`).
`setLocale`	`(locale: string) => void`	Nastaví nový jazyk. Ve výchozím nastavení spustí uložení a znovunačtení stránky.

Příklad přepínače jazyků#

Komponenta přepínače jazyků v rozbalovacím seznamu:

tsx

"use client"; // Required for Next.js App Router

import { useLingoContext } from "@lingo.dev/compiler/react";

const localeLabels: Record<string, string> = {
  en: "English",
  es: "Espanol",
  de: "Deutsch",
  fr: "Francais",
  ja: "日本語",
};

export function LanguageSwitcher() {
  const { locale, setLocale } = useLingoContext();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      {Object.entries(localeLabels).map(([code, label]) => (
        <option key={code} value={code}>
          {label}
        </option>
      ))}
    </select>
  );
}

V Next.js musí být přepínač jazyků klientská komponenta ("use client"), protože používá React hook.

Co se stane při volání setLocale#

Jazyk se uloží

Ve výchozím nastavení se nový jazyk uloží do cookie s názvem locale s dobou platnosti 1 rok. Díky tomu zůstane preference zachovaná i po znovunačtení stránky nebo restartu prohlížeče.

Stránka se znovu načte

Stránka se znovu načte, aby se všechny komponenty vykreslily v novém jazyce. Server Components načtou překlady pro nový jazyk na serveru a Client Components dostanou aktualizovaný slovník.

Další požadavky používají nový jazyk

Při dalším načtení stránky Compiler přečte uložený jazyk a doručí odpovídající překlady.

Možnosti ukládání#

Výchozí mechanismus ukládání je založený na cookies a nastavuje se pomocí localePersistence:

{
  localePersistence: {
    type: "cookie",
    config: {
      name: "locale",       // Cookie name
      maxAge: 31536000,     // 1 year in seconds
    },
  },
}

Možnost	Výchozí hodnota	Popis
`type`	`"cookie"`	Mechanismus ukládání.
`config.name`	`"locale"`	Název cookie.
`config.maxAge`	`31536000`	Doba platnosti cookie v sekundách.

Vlastní ukládání#

Pro směrování jazyků podle URL, localStorage nebo vlastní detekci podle hlaviček si vytvořte vlastní resolvery jazyka. Export persistLocale ve vašem klientském resolveru určuje, co se stane při volání setLocale:

// .lingo/locale-resolver.client.ts
export function resolveLocale(): string {
  return localStorage.getItem("locale") || "en";
}

export function persistLocale(locale: string): void {
  localStorage.setItem("locale", locale);
  window.location.reload();
}

Úplné příklady řešení založených na URL, cookies a hlavičkách najdete v části Custom Locale Resolvers.

Čtení jazyka bez přepínání#

Pokud potřebujete aktuální jazyk pro zobrazení nebo podmíněné vykreslování, ale nechcete nabízet přepínač, použijte stejný hook:

tsx

"use client";

import { useLingoContext } from "@lingo.dev/compiler/react";

export function LocaleBadge() {
  const { locale } = useLingoContext();
  return <span>{locale.toUpperCase()}</span>;
}

Další kroky#

Custom Locale Resolvers

Ukládání pomocí URL, localStorage a hlaviček

Configuration Reference

Možnosti localePersistence

Integrace Next.js

Chování Server a Client Components

Vite + React

Přepínání jazyka na klientu