Sari la conținut

Internaționalizare

Adaugă suport multi-limbă în aplicația ta. Folosește Proyecta Content API pentru localizarea conținutului editorial sau cere AI-ului să configureze direct în cod un framework i18n.

Proyecta suportă două abordări complementare pentru internaționalizarea aplicațiilor pe care le construiești:

  1. Localizarea conținutului prin Proyecta Content API — pentru conținut editorial (articole de blog, întrebări frecvente, texte de marketing) care trebuie tradus în mai multe limbi
  2. i18n la nivel de cod printr-un framework de traducere — pentru șiruri de caractere din interfață, date, valute și schimbarea limbii în timp real

Ambele funcționează acum. Pe care dintre ele ai nevoie depinde de ce anume traduci.

Proyecta în sine vine cu 24 de locale, deci produsul stăpânește bine i18n-ul. Aceleași tipare se aplică și aplicațiilor pe care le construiești în el.

Opțiunea 1: Localizarea conținutului (Proyecta Content API)

Secțiune intitulată „Opțiunea 1: Localizarea conținutului (Proyecta Content API)”

Dacă construiești un site cu mult conținut — blog, bază de cunoștințe, pagini de marketing, catalog de produse — folosește suportul nativ pentru locale. Spune-i AI-ului ce limbi suporți ("Make the site available in English, Spanish and French") și le înregistrează pentru tine, cu engleza ca limbă implicită. Apoi recuperezi conținutul în limba vizitatorului.

Pe frontend, hook-urile tipizate pentru conținut din template rezolvă câmpurile localizate pentru tine — pasezi localul activ al vizitatorului și fiecare câmp localized îți vine înapoi ca o singură valoare tradusă:

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
}

În culise, CMS-ul parcurge un lanț de fallback — localul solicitat → fallback-urile configurate ale acestuia → localul implicit — și raportează codul pe care l-a servit efectiv pentru fiecare intrare, sub forma localeResolved. Dacă omiti locale pe site-uri cu o singură limbă, câmpurile vin ca valori brute.

Aceasta este soluția potrivită atunci când:

  • Editorii care nu scriu cod trebuie să traducă conținut
  • Vrei ca traducerile să fie versionabile
  • Ai nevoie de publicare specifică per locale (publicarea programată vine în curând — intrările necesită momentan publicare manuală prin API)

Vezi Content Management pentru Content API complet.

Pentru șiruri de caractere din interfață — etichete, butoane, mesaje de eroare, date, valute — cere AI-ului să configureze un framework i18n direct în proiectul tău:

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-ul va:

  1. Alege un framework — AI-ul folosește i18next cu react-i18next (standardul Proyecta)
  2. Crea fișierele de catalog în src/locales/ (câte un JSON per limbă)
  3. Împacheta textele în apeluri t() (din hook-ul useTranslation al react-i18next)
  4. Adăuga o componentă de schimbare a limbii
  5. Configura rutarea URL cu prefixe de locale
  6. Gestiona layout-urile RTL (dir="rtl") pentru arabă, ebraică etc.
  7. Formata numere, date și valute conform localului

Odată ce limba de bază este la locul ei, AI-ul este excelent pentru a produce celelalte fișiere de catalog:

  • "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."

Pentru conținut cu miză mare (texte juridice, medicale, financiare), roagă un traducător uman să verifice rezultatul AI-ului înainte de a-l publica.

Cele mai multe aplicații reale le folosesc pe amândouă: i18n la nivel de cod pentru elementele de interfață (butoane, erori, navigație) și Content API pentru conținut editorial (articole, descrieri de produse). Coexistă fără probleme — framework-ul tău i18n gestionează fișierele de catalog la build time, iar Content API servește intrările localizate la runtime.

  1. Alege mai întâi limba de bază și finalizează textele. Traducerea unui conținut în continuă schimbare este anevoioasă.
  2. Fă traducerile în loturi. Nu traduce pe măsură ce mergi — așteaptă până când o funcționalitate este stabilă.
  3. Testează RTL devreme dacă suporți arabă sau ebraică. Erorile RTL nu se văd până nu le cauți efectiv.
  4. Include lang și dir pe <html>. Browserele și cititoarele de ecran depind de acestea.
  5. Folosește Intl pentru formatare. Nu implementa manual formatarea datelor sau valutelor — folosește Intl.DateTimeFormat, Intl.NumberFormat.
  • UI de gestionare a localelor în builder — alegi locale, vezi gradul de acoperire a traducerilor, editezi cataloagele fără a părăsi Proyecta
  • Auto-traducere la salvare pentru șiruri noi
  • Template-uri de proiecte pregătite pentru i18n cu framework-ul pre-configurat