Skip to main content

Potpun vodič za React internacionalizaciju

Od početka do više jezika: podesite i18n u React aplikaciji, a zatim automatizujte prevode pomoću AI.

1

Instalirajte pakete

Potrebna su Vam tri paketa: react-i18next (React povezivanja), i18next (osnovna biblioteka) i, po želji, i18next-browser-languagedetector za automatsko otkrivanje lokala.

react-i18next pruža React hook funkcije i komponente. i18next je osnovni mehanizam koji obrađuje učitavanje prevoda, interpolaciju i množinu. Dodatak za otkrivanje jezika automatski čita željeni jezik pregledača.
Terminal
npm install react-i18next i18next i18next-browser-languagedetector i18next-http-backend
2

Konfigurišite i18n instancu

Napravite i18n konfiguracionu datoteku koja pokreće i18next sa podrazumevanim jezikom, resursima prevoda i lancem dodataka. Ova datoteka mora da se uveze na ulaznoj tački aplikacije pre prikazivanja bilo koje komponente.

src/i18n.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)  // Must come before .init()
  .init({
    fallbackLng: 'en',
    debug: process.env.NODE_ENV === 'development',
    interpolation: {
      escapeValue: false,  // React already escapes
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
  });

export default i18n;
„You will need to pass in an i18next instance by using initReactI18next" — ova greška znači da ste zaboravili da pozovete i18n.use(initReactI18next) pre i18n.init(). Poziv .use() mora da bude pre .init().
3

Obavijte aplikaciju komponentom I18nextProvider

Uvezite i18n konfiguracionu datoteku u korenu aplikacije i obavijte stablo komponenti komponentom I18nextProvider. Bez toga useTranslation() vraća neobrađene ključeve umesto prevedenog teksta.

src/main.tsx
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';  // Import your config
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
      <I18nextProvider i18n={i18n}>
        <App />
      </I18nextProvider>
    </Suspense>
  </React.StrictMode>
);
Ako prevodi prikazuju neobrađene ključeve kao što je „welcome" umesto „Welcome to our app", najčešći uzrok je nedostatak komponente I18nextProvider ili neuvezena i18n konfiguraciona datoteka.
4

Napravite datoteke prevoda

Napravite po jednu JSON datoteku za svaki jezik. Koristite ugnežđene ključeve da organizujete tekstove po funkciji ili stranici. Zadržite izvorni jezik (obično engleski) kao jedini izvor istine.

public/locales/en/translation.json
// public/locales/en/translation.json
{
  "nav": {
    "home": "Home",
    "about": "About",
    "settings": "Settings"
  },
  "greeting": "Hello, {{name}}!",
  "cart": {
    "itemCount_one": "{{count}} item",
    "itemCount_other": "{{count}} items"
  }
}

// public/locales/de/translation.json
{
  "nav": {
    "home": "Startseite",
    "about": "Über uns",
    "settings": "Einstellungen"
  },
  "greeting": "Hallo, {{name}}!",
  "cart": {
    "itemCount_one": "{{count}} Artikel",
    "itemCount_other": "{{count}} Artikel"
  }
}
Ključeve imenujte prema onome što opisuju, a ne mestu na kom se pojavljuju: „cart.itemCount" je bolje od „homepageCartLabel". Ključevi treba da prežive redizajn UI okruženja.
5

Koristite prevode u komponentama

Pozovite useTranslation() u bilo kojoj komponenti da dobijete funkciju t(). Koristite je za jednostavne tekstove, interpolirane promenljive i prevode sa ugrađenim JSX sadržajem preko komponente Trans.

Greeting.tsx
import { useTranslation } from 'react-i18next';

function Greeting({ userName }: { userName: string }) {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('greeting', { name: userName })}</h1>
      <nav>
        <a href="/">{t('nav.home')}</a>
        <a href="/about">{t('nav.about')}</a>
      </nav>
    </div>
  );
}
Trans component for JSX
import { Trans, useTranslation } from 'react-i18next';

// For JSX inside translations:
// "terms": "By signing up, you agree to our <link>Terms</link>."

function SignUp() {
  const { t } = useTranslation();
  return (
    <Trans i18nKey="terms" components={{
      link: <a href="/terms" className="underline" />
    }} />
  );
}
Dinamički ključevi kao što je t(`error.$'{code}'`) rade pri izvršavanju, ali alati kao što je i18next-scanner ne mogu statički da ih izdvoje. Ako koristite alate za izdvajanje, izričito navedite dinamičke ključeve ili upotrebite savet u komentaru.
6

Obradite množinu i promenljive

i18next obrađuje množinu prema CLDR pravilima, a ne samo kao jedninu i množinu. Arapski ima šest oblika (zero, one, two, few, many, other), a japanski jedan (other). Definišite sve potrebne oblike u datotekama prevoda i i18next će automatski izabrati ispravan.

Plural forms by language
// English: 2 forms (one, other)
{
  "itemCount_one": "{{count}} item",
  "itemCount_other": "{{count}} items"
}

// Arabic: 6 forms (zero, one, two, few, many, other)
{
  "itemCount_zero": "لا عناصر",
  "itemCount_one": "عنصر واحد",
  "itemCount_two": "عنصران",
  "itemCount_few": "{{count}} عناصر",
  "itemCount_many": "{{count}} عنصرًا",
  "itemCount_other": "{{count}} عنصر"
}

// Japanese: 1 form (other)
{
  "itemCount_other": "{{count}}個のアイテム"
}
Nikada nemojte u kodu da koristite count === 1 za otkrivanje jednine. Jezici kao što je francuski tretiraju 0 kao jedninu. Ruski, arapski i poljski imaju oblike koje engleski nema. Prepustite i18next sistemu pravila množine.
7

Dodajte promenu i otkrivanje jezika

Napravite izbor jezika koji poziva i18n.changeLanguage(). Povežite ga sa alatom za otkrivanje jezika pregledača kako biste pri prvoj poseti automatski otkrili željeni jezik korisnika, a zatim sačuvali njegov izričiti izbor.

LanguageSwitcher.tsx
import { useTranslation } from 'react-i18next';

const LANGUAGES = [
  { code: 'en', label: 'English' },
  { code: 'de', label: 'Deutsch' },
  { code: 'ja', label: '日本語' },
  { code: 'es', label: 'Español' },
];

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  return (
    <select
      value={i18n.language}
      onChange={(e) => i18n.changeLanguage(e.target.value)}
    >
      {LANGUAGES.map(({ code, label }) => (
        <option key={code} value={code}>{label}</option>
      ))}
    </select>
  );
}
Ako koristite SSR (Next.js, Remix), server može da otkrije drugi jezik od klijenta jer nema podešavanja pregledača. To izaziva neusklađenost hidratacije. Rešenje: prosledite otkriveni lokal sa servera klijentu kao prop vrednost ili kolačić, kako bi oba prikazala isti jezik.
8

Automatizujte prevode

Kada završite i18n podešavanje, prevedite datoteke lokala pomoću AI. U IDE okruženju zatražite od AI pomoćnika da prevede izvornu datoteku ili koristite i18n Agent CLI u CI/CD pipeline procesu.

Terminal
# In your IDE, ask your AI assistant:
> Translate public/locales/en/translation.json to German, Japanese, and Spanish

✓ de/translation.json created (1.2s)
✓ ja/translation.json created (1.5s)
✓ es/translation.json created (1.1s)

# Or use the CLI in CI/CD:
npx i18n-agent translate public/locales/en/translation.json --lang de,ja,es
Prevodite postepeno — kada dodate nove ključeve u izvornu datoteku, prevedite samo razliku umesto da ponovo generišete sve datoteke. Tako se čuvaju prevodi koje su ljudi pregledali.

Automatizujte kvalitet prevoda

Otkrijte nedostajuće ključeve i neispravna mesta za promenljive pomoću i18n-validate pre objavljivanja. Testirajte UI lažnim prevodima pomoću i18n-pseudo pre nego što stignu pravi prevodi.

Uobičajene zamke

Prevodi prikazuju neobrađene ključeve

Uzroci: nedostaje I18nextProvider, i18n konfiguracija nije uvezena u korenu aplikacije, imenski prostor nije učitan ili se prevodi još učitavaju asinhrono. Potražite savete u konzoli pregledača uz debug: true.

Suspense greška bez rezervnog prikaza

„A component suspended while responding to synchronous input" — dodajte granicu '&lt;Suspense&gt;' oko aplikacije ili postavite useSuspense: false u i18next init konfiguraciji.

Neusklađenost SSR hidratacije

Server prikazuje jedan lokal, a klijent hidrira drugi. Obezbedite da oba koriste isti izvor lokala — prosledite ga sa servera kao prop vrednost i ne oslanjajte se samo na otkrivanje pregledača.

Bez automatskog dovršavanja ključeva prevoda

Proširite i18next modul tipom resursa: declare module 'i18next' '{ interface CustomTypeOptions { resources: typeof resources } }'. Tako t() pozivi postaju tipski bezbedni i dobijaju automatsko dovršavanje.

Preporučena struktura datoteka

Project Structure
my-react-app/
├── public/
│   └── locales/
│       ├── en/
│       │   ├── translation.json    # Default namespace
│       │   ├── common.json         # Shared strings
│       │   └── dashboard.json      # Feature namespace
│       ├── de/
│       │   ├── translation.json
│       │   ├── common.json
│       │   └── dashboard.json
│       └── ja/
│           └── ...
├── src/
│   ├── i18n.ts                     # i18n configuration
│   ├── main.tsx                    # App entry with Provider
│   ├── App.tsx
│   └── components/
│       └── LanguageSwitcher.tsx
└── package.json

Prevedite i:

Isprobajte i18n Agent sada

Pustite datoteku za prevođenje ovde

JSON, YAML, PO, XML, CSV, Markdown, Properties

ili kliknite za izbor

Ciljni jezici

Registracija nije potrebnaTrenutna procena

Česta pitanja