NetTeam Solutions S.A.
  • Blog
  • Projekty
  • Produkty
  • Praca
  • FAQ
  • Kontakt
Search
  • Blog
  • Projekty
  • Produkty
  • Praca
  • FAQ
  • Kontakt

i18next

  • Home
  • Blog z wpisami
  • O nas
  • i18next

i18next

Krzysztof Pawlak2023-09-12T12:04:25+02:00
Krzysztof Pawlak O nas Brak komentarzy

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 😉

Udostępnij

Facebook Twitter LinkedIn Google + Email

Autor

Krzysztof Pawlak

Dodaj komentarz Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Kategorie

  • Artykuły
  • DevOps
  • IT
  • JavaScript
  • O nas
  • Ogólnie o programowaniu
  • React
  • useQuery

Ostatnie posty

i18next
2023-09-12
praca zespołowa w NTS, kodowanie, czysty kod
Jak dbamy o jakość kodu w NetTeam Solutions
2023-07-20
pętle w JavaScript
Wbijanie gwoździ śrubokrętem – czyli o pętlach w JavaScript
2023-07-20
dobra rada, czysty kod, NetTeam Solutions, NTS, programuję, dobre p[raktyki programistyczne
Dobre praktyki programowania – czysty kod
2023-06-14
Uruchamianie kontenerów w środowisku Nomad
2023-06-02
Instalacja usługi Nomad jako środowiska do uruchomienia kontenerów
2023-06-01
NetTeam Solutions S.A.

Kapitał zakładowy: 1 000 000 PLN
NIP: 8971773944
REGON: 021519243
Spółka wpisana do Krajowego Rejestru Sądowego, VI Wydział Gospodarczy KRS Sądu Rejonowego dla
Wrocławia Fabrycznej, nr KRS 0000501921.

Ostatnie posty

i18next
2023-09-12
praca zespołowa w NTS, kodowanie, czysty kod
Jak dbamy o jakość kodu w NetTeam Solutions
2023-07-20
pętle w JavaScript
Wbijanie gwoździ śrubokrętem – czyli o pętlach w JavaScript
2023-07-20
dobra rada, czysty kod, NetTeam Solutions, NTS, programuję, dobre p[raktyki programistyczne
Dobre praktyki programowania – czysty kod
2023-06-14
Uruchamianie kontenerów w środowisku Nomad
2023-06-02
Instalacja usługi Nomad jako środowiska do uruchomienia kontenerów
2023-06-01

Kategorie

Artykuły DevOps IT JavaScript Ogólnie o programowaniu O nas React useQuery
NetTeam Solutions S.A. © Copyright 2023. All Rights Reserved.