
Potpuni vodič za internacionalizaciju u Reactu
Od nule do višejezičnosti: postavite i18n u svojoj React aplikaciji, a zatim automatizirajte prevođenje pomoću AI.
Instalirajte pakete
Potrebna su Vam tri paketa: react-i18next (povezivanja za React), i18next (temeljna biblioteka) te, po želji, i18next-browser-languagedetector za automatsko otkrivanje lokalne postavke.
npm install react-i18next i18next i18next-browser-languagedetector i18next-http-backendKonfigurirajte instancu i18n
Izradite konfiguracijsku datoteku i18n koja inicijalizira i18next sa zadanim jezikom, resursima prijevoda i lancem dodataka. Tu datoteku morate uvesti na ulaznoj točki aplikacije prije prikaza bilo koje komponente.
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;Omotajte aplikaciju komponentom I18nextProvider
Uvezite konfiguracijsku datoteku i18n u korijenu aplikacije i omotajte stablo komponenti komponentom I18nextProvider. Bez toga useTranslation() vraća neobrađene ključeve umjesto prevedenog teksta.
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>
);Napravite datoteke prijevoda
Izradite po jednu JSON datoteku za svaki jezik. Ugniježđenim ključevima organizirajte nizove prema značajci ili stranici. Izvorni jezik (obično engleski) zadržite kao jedini izvor istine.
// 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"
}
}Upotrebljavajte prijevode u komponentama
Pozovite useTranslation() u bilo kojoj komponenti kako biste dobili funkciju t(). Upotrebljavajte je za jednostavne nizove, interpolirane varijable i prijevode s ugrađenim JSX sadržajem putem komponente Trans.
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>
);
}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" />
}} />
);
}Obradite množinu i varijable
i18next obrađuje oblike množine prema pravilima CLDR-a — ne samo jedninu i množinu. Arapski ima šest oblika (zero, one, two, few, many, other), a japanski jedan (other). Definirajte sve potrebne oblike u datotekama prijevoda, a i18next će automatski odabrati odgovarajući.
// 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}}個のアイテム"
}Dodajte promjenu i otkrivanje jezika
Izradite izbornik jezika koji poziva i18n.changeLanguage(). Povežite ga s dodatkom za otkrivanje jezika preglednika kako biste pri prvom posjetu automatski otkrili željeni jezik korisnika, a zatim sačuvali njegov izričiti odabir.
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>
);
}Automatizirajte prevođenje
Nakon dovršetka postavljanja i18n prevedite datoteke lokalnih postavki pomoću AI. U IDE-u zatražite od AI pomoćnika da prevede izvornu datoteku ili upotrijebite i18n Agent CLI u svojem CI/CD pipelineu.
# 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,esAutomatizirajte kvalitetu prijevoda
Uobičajene zamke
Prijevodi prikazuju neobrađene ključeve
Pogreška značajke Suspense bez pričuvnog prikaza
Neusklađenost SSR hidratacije
Bez automatskog dovršavanja ključeva prijevoda
Preporučena struktura datoteka
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.jsonIsprobajte i18n Agent odmah
Povucite datoteku za prijevod ovdje
JSON, YAML, PO, XML, CSV, Markdown, Properties
ili kliknite za odabir
Ciljni jezici