React i18n einfach gemacht
Typsichere Internationalisierung für React‑Anwendungen mit Hooks, Context und nahtloser CDN‑Auslieferung.
Get started in 3 steps
Install
Add @better-i18n/use-intl and use-intl to your project.
npm install @better-i18n/use-intl use-intl
Wrap your app with BetterI18nProvider
Place the provider at the root of your component tree. It fetches messages from the CDN and makes them available via hooks.
import { BetterI18nProvider } from '@better-i18n/use-intl';
function App() {
return (
<BetterI18nProvider project="your-org/your-project" locale="en">
<YourApp />
</BetterI18nProvider>
);
}Use translations
Call useTranslations() in any component to access your translation keys with full TypeScript support.
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return <h1>{t('welcome')}</h1>;
}Features
Installation & Setup
Get started with @better-i18n/use-intl in three steps — install, wrap your app with the provider, and start translating.
# 1. Install
npm install @better-i18n/use-intl
# 2. Wrap your app
import { BetterI18nProvider } from '@better-i18n/use-intl'
function App() {
return (
<BetterI18nProvider project="org/project" locale="en">
<YourApp />
</BetterI18nProvider>
)
}
# 3. Use translations
import { useTranslations } from '@better-i18n/use-intl'
function MyComponent() {
const t = useTranslations('common')
return <h1>{t('welcome')}</h1>
}Funktioniert mit beliebten React‑i18n‑Bibliotheken
Better i18n ersetzt Ihre Lieblings‑i18n‑Bibliothek nicht – es ist die Translation‑Management‑Schicht, die sie noch leistungsfähiger macht.
Better i18n + react-intl
Die beliebteste React‑i18n‑Bibliothek mit Unterstützung für das ICU‑Message‑Format. Von Tausenden Produktions‑Apps genutzt.
Better i18n synchronisiert Ihre Übersetzungen direkt ins react-intl‑JSON‑Format. Im Dashboard bearbeiten, Änderungen sofort in Ihrer App sehen.
Better i18n + react-i18next
Leistungsstarkes i18n‑Framework für React auf Basis von i18next. Features wie Namespaces, Interpolation und Plurals sind integriert.
Exportieren Sie in i18next‑kompatibles JSON mit Namespaces. Better i18n übernimmt den Übersetzungs‑Workflow, i18next das Runtime‑Handling.
Better i18n + FormatJS
Eine Bibliothekssammlung für Internationalisierung, die react-intl einschließt. Unterstützt ICU‑Message‑Syntax und CLDR‑Daten.
Better i18n unterstützt das ICU‑Message‑Format nativ. Verwalten Sie komplexe Plurals und Selects visuell und exportieren Sie ins FormatJS‑Format.
Better i18n + Lingui
Eine gut lesbare, automatisierte und optimierte i18n‑Bibliothek. Großartige DX mit macro‑basierter Message‑Extraktion.
Extrahieren Sie Messages mit der Lingui CLI, verwalten Sie Übersetzungen in Better i18n und synchronisieren Sie sie automatisch per GitHub‑Integration zurück.
Schnellstart
Starten Sie in Minuten mit Better i18n in Ihrer React‑App.
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return (
<div>
<h1>{t('welcome')}</h1>
<p>{t('greeting', { name: 'World' })}</p>
</div>
);
}Related Articles
How to Add i18n to Shopify Hydrogen (Complete Guide)
Shopify Hydrogen is the modern way to build custom storefronts — but adding internationalization (i18n) can be challenging. You need locale-aware routing,...
Read more →Django i18n mit KI-Übersetzung: Vollständige Einrichtungsanleitung
Django i18n mit KI-Übersetzung: Vollständige Einrichtungsanleitung Django wird mit einem ausgereiften Internationalisierungs-Framework (i18n) geliefert,...
Read more →Better i18n vs. Crowdin: An Honest Comparison for Modern App Teams
Crowdin has been the default choice for translation management for years. It's mature, feature-rich, and most localization engineers have used it at some...
Read more →Mit React‑i18n loslegen
Kostenloser Tarif verfügbar. Keine Kreditkarte erforderlich.