Przejdź do głównej zawartości

Internacjonalizacja

Dodaj obsługę wielu języków do swojej aplikacji. Użyj Proyecta Content API do lokalizacji treści redakcyjnych lub poproś AI o skonfigurowanie frameworka i18n bezpośrednio w kodzie.

Proyecta obsługuje dwa uzupełniające się podejścia do internacjonalizacji tworzonych aplikacji:

  1. Lokalizacja treści za pomocą Proyecta Content API — dla treści redakcyjnych (wpisy na blogu, FAQ, teksty marketingowe), które muszą być przetłumaczone na wiele języków
  2. i18n na poziomie kodu za pomocą frameworka tłumaczeń — dla ciągów interfejsu użytkownika, dat, walut i przełączania języka w czasie rzeczywistym

Oba podejścia działają już dziś. To, którego potrzebujesz, zależy od tego, co tłumaczysz.

Sam builder Proyecta obsługuje 24 języki regionalne, więc produkt doskonale zna temat i18n. Te same wzorce mają zastosowanie do aplikacji tworzonych w jego obrębie.

Jeśli budujesz witrynę z dużą ilością treści — blog, bazę wiedzy, strony marketingowe, katalog produktów — skorzystaj z wbudowanej obsługi języków regionalnych w Content API.

// Create the locales you support
await proyecta.content.locales.create({
/* code: 'en', name: 'English' */
});
await proyecta.content.locales.create({
/* code: 'es', name: 'Español' */
});
await proyecta.content.locales.create({
/* code: 'fr', name: 'Français' */
});
// Then create entries that exist in multiple locales — fetch the right
// translation per request based on the user's locale.

To właściwe rozwiązanie, gdy:

  • Redaktorzy nieznający kodu muszą tłumaczyć treści
  • Chcesz, aby tłumaczenia były wersjonowane
  • Potrzebujesz publikowania specyficznego dla danego języka regionalnego (planowane publikowanie jest wkrótce — wpisy wymagają obecnie ręcznego opublikowania przez API)

Zobacz Content Management, aby zapoznać się z pełną dokumentacją Content API.

W przypadku ciągów interfejsu użytkownika — etykiet, przycisków, komunikatów o błędach, dat i walut — poproś AI o skonfigurowanie frameworka i18n bezpośrednio w projekcie:

Add internationalization to my app.
Support English, Spanish, French, and Arabic.
Add message catalogs in src/locales/.
Add a language switcher in the header.
Use locale-prefixed URLs like /en/about and /es/about.
Make sure RTL layout works correctly for Arabic.

AI wykona następujące kroki:

  1. Wybierze framework — AI używa i18next z react-i18next (standard Proyecta)
  2. Utworzy pliki katalogów w src/locales/ (jeden plik JSON na język)
  3. Opakuje tekst w wywołania t() (z hooka useTranslation biblioteki react-i18next)
  4. Doda komponent przełącznika języka
  5. Skonfiguruje routing URL z prefiksami językowymi
  6. Obsłuży układy RTL (dir="rtl") dla arabskiego, hebrajskiego itp.
  7. Sformatuje liczby, daty i waluty zgodnie z ustawieniami językowymi

Gdy bazowy język jest już gotowy, AI świetnie radzi sobie z generowaniem pozostałych plików katalogów:

  • "Translate every string in src/locales/en.json into Spanish, French, German, and Japanese. Use natural, idiomatic phrasing — don't translate brand names."
  • "My app is fully built in English. Add Spanish translations for everything and an es/ route prefix."

W przypadku treści o wysokiej stawce (teksty prawne, medyczne, finansowe) przed wdrożeniem poproś człowieka-tłumacza o przejrzenie wyników AI.

Większość prawdziwych aplikacji korzysta z obu metod: i18n na poziomie kodu dla elementów interfejsu (przyciski, błędy, nawigacja) oraz Content API dla treści redakcyjnych (artykuły, opisy produktów). Obie metody współistnieją bez problemów — framework i18n obsługuje pliki katalogów podczas budowania, a Content API serwuje zlokalizowane wpisy w czasie rzeczywistym.

  1. Najpierw wybierz język bazowy i dopracuj treści. Tłumaczenie ruchomego celu jest uciążliwe.
  2. Tłumacz partiami. Nie tłumacz na bieżąco — poczekaj, aż funkcja będzie stabilna.
  3. Testuj RTL wcześnie, jeśli obsługujesz arabski lub hebrajski. Błędy RTL ukrywają się, dopóki naprawdę nie spojrzysz.
  4. Dodaj lang i dir do <html>. Przeglądarki i czytniki ekranu są od tego zależne.
  5. Używaj Intl do formatowania. Nie twórz własnego formatowania dat ani walut — używaj Intl.DateTimeFormat i Intl.NumberFormat.
  • Interfejs zarządzania językami w builderze — wybierz języki regionalne, sprawdź pokrycie tłumaczeń, edytuj katalogi bez opuszczania Proyecta
  • Automatyczne tłumaczenie po zapisaniu dla nowych ciągów
  • Szablony projektów gotowe na i18n z wstępnie skonfigurowanym frameworkiem