Jak dodać wiele języków do aplikacji lub strony

Aby dodać wiele języków do aplikacji, przenieś cały tekst interfejsu do plików tłumaczeń (jeden plik na język), wczytaj je biblioteką i18n i dodaj przełącznik języka, który zapamiętuje wybór. Dla publicznych stron, które mają być znajdowane w wyszukiwarce, nadaj każdemu językowi osobny adres, np. /fr/, i połącz wersje znacznikami hreflang. Potem zajmij się tym, o czym ludzie zwykle zapominają: datami, liczbami i walutami, dłuższym tekstem w niektórych językach, pismem od prawej do lewej oraz treściami zapisanymi w bazie danych.

Pojęcia, które warto znać

• Internacjonalizacja (i18n): przygotowanie kodu tak, by obsługiwał dowolny język — brak tekstów wpisanych na sztywno, formatowanie zależne od ustawień regionalnych, elastyczne układy. Liczba „18” to liczba liter między i a n.
• Lokalizacja (l10n): dostosowanie aplikacji do konkretnego języka lub rynku — głównie tłumaczenie, czasem także waluta, grafiki i teksty prawne.
• Ustawienia regionalne (locale): język i opcjonalnie region, np. en-GB lub pt-BR.

Zrób i18n raz, a dodawanie kolejnych języków będzie już głównie pracą tłumacza.

Opcje i kompromisy

Dla większości aplikacji właściwą podstawą jest standardowa biblioteka i18n z plikami tłumaczeń. Wersje robocze możesz wygenerować tłumaczeniem maszynowym lub AI, a następnie poprosić biegłych użytkowników języka o sprawdzenie tego, co klienci widzą najczęściej.

Części wielojęzycznej aplikacji

Pliki tłumaczeń

Zamiast <h1>Witaj ponownie</h1> kod zawiera t('dashboard.welcome'), a każde ustawienie regionalne ma plik z tekstem:

{
  "dashboard": {
    "welcome": "Witaj ponownie, {{name}}",
    "items_one": "{{count}} element",
    "items_other": "{{count}} elementów"
  }
}

Zmienne zapisuj jako symbole zastępcze, zamiast sklejać fragmenty zdań — kolejność słów różni się między językami. Korzystaj też z reguł liczby mnogiej biblioteki: w angielskim są dwie formy (1 item, 2 items), ale w niektórych językach — w tym w polskim — jest ich trzy, cztery lub więcej.

Formatowanie dat, liczb i pieniędzy

Nie formatuj tego ręcznie. Wbudowane w przeglądarkę API Intl formatuje dane dla dowolnych ustawień regionalnych: 1,234.5 po angielsku to 1 234,5 po polsku lub 1.234,5 po niemiecku; daty raz zaczynają się od dnia, raz od miesiąca; symbol waluty zmienia miejsce. Zapisuj daty w UTC, a pieniądze jako liczby z kodem waluty, i formatuj je dopiero przy wyświetlaniu.

Układ, który się rozciąga

Przetłumaczony tekst bywa dłuższy niż angielski — szczególnie niemieckie i fińskie słowa. Unikaj przycisków o stałej szerokości i ucinanych etykiet, a testuj na najdłuższym języku.

Języki pisane od prawej do lewej

Arabski, hebrajski, perski i urdu czytamy od prawej do lewej. Dla tych ustawień regionalnych ustaw dir="rtl" na stronie i używaj logicznych właściwości CSS (margin-inline-start zamiast margin-left; w Tailwind ms-4 zamiast ml-4), aby układ odbijał się automatycznie. Ikony wskazujące kierunek, jak strzałki, też trzeba odwrócić.

Przełącznik języka i wykrywanie

Pokazuj przełącznik na każdej stronie, podpisany nazwą każdego języka w tym języku („Deutsch”, „Français”, „العربية”), a nie flagami — flagi oznaczają kraje, a nie języki. Przy pierwszej wizycie wykryj preferowany język przeglądarki, by zasugerować wersję, ale to wyraźny wybór odwiedzającego ma pierwszeństwo i powinien zostać zapamiętany.

Adresy URL i SEO

Dla stron, które mają być widoczne w wynikach wyszukiwania, każdy język potrzebuje własnego adresu. Stan na wrzesień 2026: wytyczne Google dla stron wielojęzycznych są takie:

• Osobne adresy dla każdego języka — podkatalogi (example.com/fr/) są najprostsze; działają też subdomeny i domeny krajowe. Parametry w adresie (?lang=fr) nie są zalecane.
• Nie przełączaj języka wyłącznie przez ciasteczko lub ustawienia przeglądarki — robot Google może nigdy nie zobaczyć pozostałych wersji.
• Nie przekierowuj automatycznie według języka; zamiast tego połącz wersje linkami.
• Użyj hreflang, by wskazać Google, które strony są tłumaczeniami siebie nawzajem. Każda wersja musi wymieniać siebie i wszystkie pozostałe, inaczej adnotacje mogą zostać zignorowane. Dodaj x-default dla strony zapasowej.
• Google wykrywa język strony na podstawie widocznej treści, a nie atrybutu lang ani hreflang — dlatego przetłumacz całą stronę, a nie tylko menu.

Mimo to ustaw <html lang="fr"> na każdej wersji: czytniki ekranu używają go do wyboru właściwej wymowy, a to wymóg dostępności.

Ekrany zalogowanej aplikacji nie muszą być indeksowane, więc dla nich wystarczy zapisać język w profilu użytkownika. Jak sprawić, by publiczne strony w ogóle były odwiedzane przez roboty, znajdziesz w artykule SEO dla stron zbudowanych z AI.

Treści w bazie danych

Tekst interfejsu leży w plikach, a treści takie jak nazwy produktów, wpisy na blogu i kategorie — w bazie danych. Dwa częste wzorce:

• Tabela tłumaczeń: product_translations (product_id, locale, name, description). Czysty wzorzec, który skaluje się do wielu języków.
• Kolumna JSON dla każdego pola: name: {"en": "...", "fr": "..."}. Prostsze przy kilku językach.

Zdecyduj, co się dzieje, gdy brakuje tłumaczenia — zwykle lepiej pokazać język domyślny niż puste miejsce.

E-maile i powiadomienia

Zapisuj język każdego użytkownika i używaj go także w e-mailach, powiadomieniach i plikach PDF. Łatwo przetłumaczyć aplikację i zapomnieć, że e-mail powitalny nadal przychodzi po angielsku.

Prompty, które działają

Dodaj internacjonalizację z react-i18next. Przenieś każdy tekst widoczny dla użytkownika do locales/en.json z kluczami w przestrzeniach nazw, użyj interpolacji i reguł liczby mnogiej zamiast sklejania tekstu, a daty, liczby i ceny formatuj przez Intl według bieżących ustawień regionalnych. Na razie nie zmieniaj żadnego wyrazu.

Dodaj francuski i niemiecki. Publiczne strony marketingowe dostają prefiksy URL /fr/ i /de/, a angielska wersja zostaje w katalogu głównym. Na każdej stronie dodaj linki hreflang (z autoodniesieniem i x-default) oraz ustaw html lang dla każdej strony. Dodaj przełącznik języka, który pokazuje natywną nazwę każdego języka. Na stronach po zalogowaniu zapisz język w profilu użytkownika.

Dodaj arabski z obsługą pisma od prawej do lewej: ustaw dir="rtl" dla arabskiego, zamień marginesy i dopełnienia lewo/prawo na logiczne właściwości, odwróć ikony wskazujące kierunek i sprawdź, czy formularze i tabele nadal są czytelne.

Krok po kroku

1. Wybierz pierwszy dodatkowy język na podstawie realnego popytu — tam, gdzie są Twoi odwiedzający lub klienci.
2. Zinternacjonalizuj kod: przenieś teksty do plików, dodaj liczbę mnogą i formatowanie Intl. Wdróż to wyłącznie w języku angielskim i sprawdź, że nic się nie zmieniło.
3. Ustal strukturę adresów dla publicznych stron i dodaj hreflang.
4. Przetłumacz: wersję roboczą zrób tłumaczeniem maszynowym lub AI, a potem poproś o weryfikację biegłego użytkownika języka. Daj tłumaczom kontekst — słowo „Book” na jednym ekranie jest rzeczownikiem, a na innym czasownikiem.
5. Przetłumacz treści z bazy danych i ustaw wartości zapasowe.
6. Zlokalizuj resztę: e-maile, komunikaty o błędach, strony prawne, grafiki z tekstem.
7. Testuj każdy język na szerokości telefonu, a przy piśmie od prawej do lewej także w tym układzie.
8. Ustal proces, dzięki któremu nowe funkcje trafiają od razu z tłumaczeniami, a nie po miesiącach.

Częste błędy

• Sklejanie zdań ("You have " + n + " messages"), co psuje się w innych językach.
• Teksty wpisane na sztywno w komponentach, komunikaty o błędach i walidacji.
• Ręczne formatowanie dat i cen.
• Flagi jako oznaczenie języków oraz automatyczne przekierowania, które uwięzią ludzi w złej wersji.
• Jeden adres dla wszystkich języków na stronach, które mają być indeksowane.
• Brakujące linki zwrotne hreflang, przez co Google ignoruje adnotacje.
• Przetłumaczony interfejs bez treści albo odwrotnie.
• Niezweryfikowane tłumaczenie maszynowe na stronach z cenami, prawnymi treściami i płatnością.

Lista kontrolna wielojęzyczności

• Brak tekstów widocznych dla użytkownika wpisanych na sztywno; użyte reguły liczby mnogiej i symbole zastępcze
• Daty, liczby i waluty formatowane przez Intl
• Przełącznik języka z natywnymi nazwami na każdej stronie; wybór zapamiętany
• Osobne adresy dla każdego języka na publicznych stronach; bez wymuszonych przekierowań
• hreflang na każdej wersji, w tym autoodniesienie i x-default
• html lang (oraz dir="rtl" tam, gdzie trzeba) ustawione dla każdej strony
• Treści w bazie danych przetłumaczone, z sensownymi wartościami zapasowymi
• E-maile i powiadomienia wysyłane w języku użytkownika
• Tekst dla klientów sprawdzony przez biegłego użytkownika języka

Wiele języków w Mythex

W Mythex dodajesz języki, pisząc w czacie — nie ma osobnego panelu tłumaczeń — więc podane wyżej prompty działają bez zmian. Najpierw zrób krok z internacjonalizacją i sprawdź go w podglądzie, zanim dodasz języki; to duża przebudowa, a punkt kontrolny w czacie daje możliwość cofnięcia zmian, gdyby coś się zepsuło (czat i punkty kontrolne). Jeśli chcesz, by aplikacja tłumaczyła treści automatycznie przez AI lub API tłumaczeniowe, użyje to Twojego własnego klucza API, zapisanego w ustawieniach projektu (zmienne środowiskowe i sekrety); koszty wyjaśnia artykuł jak korzystać z API LLM. Gdy nowe języki będą gotowe, opublikuj aplikację ponownie.

Pytania