Internacjonalizacja

Dodaj obsługę wielu języków do swojej aplikacji. Użyj Proyecta Content API do lokalizacji treści redakcyjnych lub poproś AI, aby podłączyło framework 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 wymagają tłumaczenia na wiele języków
2. i18n na poziomie kodu za pomocą frameworka tłumaczeń — dla ciągów znaków interfejsu użytkownika, dat, walut i dynamicznego przełączania języka w czasie działania aplikacji

Oba podejścia działają już dziś. Wybór zależy od tego, co chcesz tłumaczyć.

Sam builder Proyecta jest dostępny w 24 językach, więc produkt doskonale rozumie i18n. Te same wzorce mają zastosowanie do aplikacji, które w nim tworzysz.

Opcja 1: Lokalizacja treści (Proyecta Content API)

Jeśli budujesz serwis z dużą ilością treści — blog, bazę wiedzy, strony marketingowe, katalog produktów — skorzystaj z wbudowanej obsługi języków. Powiedz AI, jakie języki obsługujesz ("Make the site available in English, Spanish and French"), a zarejestruje je za ciebie, z angielskim jako domyślnym. Następnie pobieraj treści w języku odwiedzającego.

Po stronie frontend typowane hooki do treści z szablonu automatycznie rozwiązują zlokalizowane pola — przekaż aktywny język odwiedzającego, a każde pole localized zwróci pojedynczą przetłumaczoną wartość:

import { useCollection, useEntry } from '@/hooks/useContent';
import { useTranslation } from 'react-i18next';

function Blog({ slug }: { slug: string }) {
    const { i18n } = useTranslation();

    // List a collection in the current locale
    const { data: posts } = useCollection('posts', { locale: i18n.language });

    // Or read one entry by slug in the current locale
    const { data: post } = useEntry('posts', slug, { locale: i18n.language });

    // ...render posts / post
}

Za kulisami CMS przechodzi przez łańcuch awaryjny — żądany język → skonfigurowane języki zapasowe → język domyślny — i zwraca w każdym wpisie kod faktycznie użytego języka jako localeResolved. W przypadku serwisów jednojęzycznych pomiń locale, a pola będą zwracane jako wartości bez lokalizacji.

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

• Redaktorzy nieznający programowania potrzebują tłumaczyć treści
• Chcesz, aby tłumaczenia były wersjonowane
• Potrzebujesz publikowania specyficznego dla danego języka (zaplanowane publikowanie pojawi się wkrótce — wpisy wymagają obecnie ręcznego publikowania przez API)

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

Opcja 2: Framework i18n na poziomie kodu

Dla ciągów znaków interfejsu użytkownika — etykiet, przycisków, komunikatów o błędach, dat, walut — poproś AI, aby podłączyło framework i18n bezpośrednio do twojego projektu:

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 teksty w wywołania t() (z hooka useTranslation z 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 językiem

Automatyczne tłumaczenie z pomocą AI

Gdy masz już gotowy język bazowy, 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 zleć weryfikację wyników AI profesjonalnemu tłumaczowi.

Łączenie obu podejść

Większość prawdziwych aplikacji używa obu metod jednocześnie: i18n na poziomie kodu dla elementów chrome interfejsu (przyciski, błędy, nawigacja) oraz Content API dla treści redakcyjnych (artykuły, opisy produktów). Oba podejścia współistnieją bez problemów — framework i18n obsługuje pliki katalogów w czasie budowania, a Content API serwuje zlokalizowane wpisy w czasie działania aplikacji.

Dobre praktyki

1. Najpierw wybierz język bazowy i dopracuj treści. Tłumaczenie ruchomego celu jest bardzo uciążliwe.
2. Tłumacz partiami. Nie tłumacz na bieżąco — poczekaj, aż dana funkcja będzie stabilna.
3. Testuj RTL wcześnie, jeśli obsługujesz arabski lub hebrajski. Błędy RTL wychodzą na jaw dopiero wtedy, gdy faktycznie na nie spojrzysz.
4. Umieszczaj lang i dir w <html>. Przeglądarki i czytniki ekranu na tym polegają.
5. Używaj Intl do formatowania. Nie twórz własnych rozwiązań do formatowania dat ani walut — korzystaj z Intl.DateTimeFormat i Intl.NumberFormat.

Wkrótce

• Interfejs zarządzania językami w builderze — wybierz języki, sprawdź pokrycie tłumaczeń, edytuj katalogi bez opuszczania Proyecta
• Automatyczne tłumaczenie po zapisaniu dla nowych ciągów znaków
• Szablony projektów gotowe na i18n z wstępnie skonfigurowanym frameworkiem