Schnelle Antwort
react-i18next ist die populärste i18n-Bibliothek für React mit 3,5M+ wöchentlichen npm-Downloads. Installieren mit npm install react-i18next i18next, JSON-Übersetzungsdateien erstellen, i18next mit i18n.init() konfigurieren, dann den useTranslation Hook verwenden: const { t } = useTranslation(); return <h1>{t('welcome')}</h1>.
Was ist react-i18next?
react-i18next ist ein React Binding für i18next, das am meisten kampferprobte JavaScript Internationalisierungs-Framework. Es bietet:
- React Hooks (
useTranslation) für funktionale Komponenten - HOCs und Render Props für Klassen-Komponenten
- Suspense Support für asynchrones Übersetzungsladen
- SSR-Kompatibilität mit Next.js, Remix und Gatsby
- Plugin-Ökosystem für Backends, Spracherkennung und Caching
Installation und Setup
Schritt 1: Dependencies installieren
Terminalnpm install react-i18next i18next
Optionale Plugins:
Terminal1# Spracherkennung 2npm install i18next-browser-languagedetector 3 4# Übersetzungen vom Backend laden 5npm install i18next-http-backend
Schritt 2: Übersetzungsdateien erstellen
src/
├── locales/
│ ├── de/
│ │ ├── common.json
│ │ └── home.json
│ └── en/
│ ├── common.json
│ └── home.json
└── i18n.ts
de/common.json:
JSON1{ 2 "welcome": "Willkommen in unserer App", 3 "nav": { 4 "home": "Startseite", 5 "about": "Über uns", 6 "contact": "Kontakt" 7 }, 8 "buttons": { 9 "submit": "Absenden", 10 "cancel": "Abbrechen", 11 "save": "Speichern" 12 } 13}
Schritt 3: i18next konfigurieren
TypeScript1// src/i18n.ts 2import i18n from 'i18next'; 3import { initReactI18next } from 'react-i18next'; 4import LanguageDetector from 'i18next-browser-languagedetector'; 5 6import deCommon from './locales/de/common.json'; 7import enCommon from './locales/en/common.json'; 8 9i18n 10 .use(LanguageDetector) 11 .use(initReactI18next) 12 .init({ 13 resources: { 14 de: { common: deCommon }, 15 en: { common: enCommon }, 16 }, 17 defaultNS: 'common', 18 fallbackLng: 'en', 19 interpolation: { escapeValue: false }, 20 }); 21 22export default i18n;
Den useTranslation Hook verwenden
Grundlegende Verwendung
TSX1import { useTranslation } from 'react-i18next'; 2 3function Header() { 4 const { t } = useTranslation(); 5 6 return ( 7 <header> 8 <h1>{t('welcome')}</h1> 9 <nav> 10 <a href="/">{t('nav.home')}</a> 11 <a href="/about">{t('nav.about')}</a> 12 </nav> 13 </header> 14 ); 15}
Mit Namespaces
TSX1function HomePage() { 2 const { t } = useTranslation('home'); 3 return <h1>{t('hero.title')}</h1>; 4} 5 6function MultiNamespace() { 7 const { t } = useTranslation(['common', 'home']); 8 return ( 9 <div> 10 <h1>{t('home:hero.title')}</h1> 11 <button>{t('common:buttons.submit')}</button> 12 </div> 13 ); 14}
Sprache wechseln
TSX1import { useTranslation } from 'react-i18next'; 2 3function LanguageSwitcher() { 4 const { i18n } = useTranslation(); 5 6 return ( 7 <div> 8 <button onClick={() => i18n.changeLanguage('de')}>Deutsch</button> 9 <button onClick={() => i18n.changeLanguage('en')}>English</button> 10 </div> 11 ); 12}
Variablen-Interpolation
JSON1{ 2 "greeting": "Hallo, {{name}}!", 3 "itemCount": "Sie haben {{count}} Artikel in Ihrem Warenkorb" 4}
TSX1function Greeting({ user }) { 2 const { t } = useTranslation(); 3 4 return ( 5 <div> 6 <h1>{t('greeting', { name: user.name })}</h1> 7 <p>{t('itemCount', { count: user.cartItems })}</p> 8 </div> 9 ); 10}
Pluralisierung
JSON1{ 2 "item_one": "{{count}} Artikel", 3 "item_other": "{{count}} Artikel", 4 "item_zero": "Keine Artikel" 5}
TSX1function CartCount({ count }) { 2 const { t } = useTranslation(); 3 return <span>{t('item', { count })}</span>; 4 // count=0: "Keine Artikel" 5 // count=1: "1 Artikel" 6 // count=5: "5 Artikel" 7}
Rich Text und Komponenten
Die Trans Komponente verwenden
JSON1{ 2 "terms": "Mit der Anmeldung stimmen Sie unseren <link>Nutzungsbedingungen</link> zu", 3 "welcome": "Willkommen <bold>{{name}}</bold> auf unserer Plattform!" 4}
TSX1import { Trans } from 'react-i18next'; 2 3function TermsText() { 4 return ( 5 <Trans 6 i18nKey="terms" 7 components={{ 8 link: <a href="/terms" className="text-blue-600" />, 9 }} 10 /> 11 ); 12}
TypeScript Integration
Type-sichere Übersetzungen
TypeScript1// src/types/i18next.d.ts 2import 'i18next'; 3import common from '../locales/de/common.json'; 4 5declare module 'i18next' { 6 interface CustomTypeOptions { 7 defaultNS: 'common'; 8 resources: { 9 common: typeof common; 10 }; 11 } 12}
Jetzt bietet TypeScript Autocomplete:
TSXconst { t } = useTranslation(); t('nav.home'); // ✅ Autocomplete t('nav.invalid'); // ❌ TypeScript Fehler
Produktions-Best-Practices
1. Namespace-Organisation
locales/
├── de/
│ ├── common.json # Geteilte UI (Buttons, Nav, Errors)
│ ├── auth.json # Login, Signup, Passwort-Reset
│ ├── dashboard.json # Dashboard-spezifisch
│ └── errors.json # Fehlermeldungen
2. Missing Key Handling
TypeScript1i18n.init({ 2 saveMissing: process.env.NODE_ENV === 'development', 3 missingKeyHandler: (lng, ns, key) => { 4 console.warn(`Fehlende Übersetzung: ${lng}/${ns}/${key}`); 5 }, 6});
Skalieren mit IntlPull
Terminal1# IntlPull in Ihrem Projekt initialisieren 2npx @intlpullhq/cli init 3 4# Keys aus Code extrahieren 5npx @intlpullhq/cli extract 6 7# Zu IntlPull hochladen 8npx @intlpullhq/cli upload 9 10# Übersetzungen herunterladen 11npx @intlpullhq/cli download
KI-Übersetzung
IntlPull übersetzt Ihre Keys automatisch mit GPT-4, Claude oder DeepL unter Beibehaltung von Kontext und Markenstimme.
OTA Updates
Übersetzungen ohne App-Releases aktualisieren:
TypeScript1import { IntlPullBackend } from '@intlpull/i18next-backend'; 2 3i18n.use(IntlPullBackend).init({ 4 backend: { 5 projectId: 'your-project-id', 6 apiKey: process.env.INTLPULL_API_KEY, 7 }, 8});
Zusammenfassung
react-i18next ist der Standard für React-Internationalisierung. Für Produktions-Apps kombinieren Sie es mit IntlPull für KI-Übersetzung, OTA-Updates und Team-Kollaboration.
Bereit zu starten? IntlPull kostenlos ausprobieren
