i18next – tłumaczenia bez wysiłku

Wielojęzykowość aplikacji to ważny aspekt, który może znacząco wpłynąć na dostępność Twojego produktu, a co za tym idzie, również na jego sukces na rynku międzynarodowym. Gdy Twoja aplikacja obsługuje wiele języków, możesz dotrzeć do większej liczby użytkowników i zwiększyć swoją globalną bazę klientów. W NetTeam Solutions zależy nam na tym, by nasze rozwiązania były stabilne i skuteczne, dlatego korzystamy z i18next – jednego z najpopularniejszych narzędzi do obsługi wielojęzyczności aplikacji.

Weźmiemy na stół naszą implementację tego rozwiązania, w aplikacji przystosowanej do trzech rynków – polskiego, angielskiego i niemieckiego.

export enum Languages {
PL = 'pl',
EN = 'en',
DE = 'de,
}

Jeżeli chodzi o działanie systemu, poprzez zaimportowanie tłumaczeń z plików json, i zainicjalizowanie i18n, z detectorem, aplikacja odczytuje aktualny język systemu użytkownika, i wykorzystuje odpowiednie tłumaczenie. Co nam to daje? Kwestia dodania nowych języków, to zmiana w naszym enumie, dodanie nowego pliku json, oraz zaimportowanie go.

import en from './translations/en.json';
import pl from './translations/pl.json';
import de from './translations/de.json';

i18n.use(detector)
    .use(initReactI18next)
    .init({
        resources: {
            en: {
                translation: en,
            },
            pl: {
                translation: pl,
            },
            de: {
                translation: de,
            },
        },
        detection: {
            order: ['path', 'navigator'],
        },
        interpolation: {
            escapeValue: false,
        },
    });

Samo użytkowanie tłumaczenia w aplikacji jest również niezwykle proste. W komponentach, wystarczy wywołać hook, a następnie w oczekiwanym miejscu, odnieść się do niego, przekazując mu klucz w postaci stringa.

const [t] = useTranslation();

return <p> {t('dashboard.title')} </p>

Drugim sposobem, by wykorzystać tłumaczenie, jest bezpośrednie zaimportowanie i18n i następnie odwołanie się do niego.

import i18n from 'i18next';

return <p> {i18n.t('stage.finished')} </>

Dlaczego zwykle nie korzystamy z tego sposobu? Zależy nam na czystości i bezpieczeństwie aplikacji, stąd nawet w tłumaczeniach, sprawdzamy typy, wykorzystując domyślny język użytkownika – w naszym wypadku polski. Dzięki temu, wiemy że klientowi nie wyświetli się klucz, zamiast tłumaczenia.

Wprowadzając wielojęzyczność do swojej aplikacji, ważne jest korzystanie z poprawnych tłumaczeń, jak się tym zajmujemy? O tym w następnym artykule 😉