Better I18NLaden...
Laden...
Alles, was Sie für mehrsprachige Next.js-Anwendungen benötigen. CDN-gestützte Übersetzungen, server-seitiges Rendering und sofortiger Sprachwechsel.
Übersetzungen werden über Cloudflare CDN aus weltweiten Edge-Standorten bereitgestellt. Ladezeiten unter 50 ms mit automatischer Cache-Invalidierung beim Veröffentlichen.
Mehr über CDN-Auslieferung erfahrenÜbersetzungen werden in Ihrem Layout serverseitig mit getMessages() geladen. Kein Aufflackern nicht übersetzter Inhalte, vollständig SEO-freundlich mit vorgerenderten Übersetzungen.
API-Referenz ansehenWechseln Sie Sprachen clientseitig mit useSetLocale() — ohne vollständiges Neuladen der Seite. BetterI18nProvider ruft neue Übersetzungen vom CDN ab und rendert sofort neu.
Clientseitige DokumentationuseManifestLanguages() ruft verfügbare Sprachen aus dem CDN-Manifest ab. Fügen Sie im Dashboard eine Sprache hinzu und sie erscheint automatisch in Ihrer App.
Hooks erkundenBasierend auf next-intl mit vollständiger TypeScript-Unterstützung. useTranslations() bietet Kompilierzeitprüfung für Übersetzungsschlüssel — Fehler vor der Laufzeit abfangen.
Typsichere API-DokumentationErhalten Sie KI-Übersetzungsvorschläge im better-i18n Dashboard. Der menschliche Genehmigungsworkflow gewährleistet Qualität. Ganze Projekte in Minuten statt in Tagen übersetzen.
Dashboard ausprobierenbetterMiddleware() erkennt die Benutzersprache anhand des URL-Pfads, Cookies oder des Accept-Language-Headers. Clerk-artiges Callback-Muster für einfache Auth-Integration.
Middleware-EinrichtungsleitfadenVerwalten Sie Übersetzungen, Sprachen und Namespaces über dash.better-i18n.com. Echtzeit-Zusammenarbeit, Versionsverlauf und GitHub-Integration.
Dashboard öffnenGet up and running in 4 simple steps.
Add the SDK to your project
bun add @better-i18n/nextCreate your i18n config
export const i18n = createI18n({ ... })Add BetterI18nProvider to your layout
<BetterI18nProvider>Call useTranslations() in any component
const t = useTranslations("ns")better-i18n works with all major React frameworks out of the box.
| Feature | Next.js | Expo | Remix | Hono | TanStack |
|---|---|---|---|---|---|
| CDN Fetch | ✓ | ✓ | ✓ | ✓ | ✓ |
| ISR / Revalidation | ✓ | — | ✓ | — | ✓ |
| useSetLocale() | ✓ | ✓ | ✓ | ✓ | ✓ |
| useFormatter() | ✓ | ✓ | ✓ | ✓ | ✓ |
| LocaleDropdown | ✓ | ✓ | ✓ | ✓ | ✓ |
| SSR Support | ✓ | — | ✓ | ✓ | ✓ |
Fügen Sie Ihrer Next.js-App in weniger als 5 Minuten Internationalisierung hinzu. Dem vollständigen Leitfaden folgen
// i18n.config.ts
import { createI18n } from "@better-i18n/next";
export const i18n = createI18n({
project: "your-org/your-project",
defaultLocale: "en",
});
// middleware.ts
import { i18n } from "./i18n.config";
export default i18n.betterMiddleware();
// app/[locale]/layout.tsx
const messages = await i18n.getMessages(locale);
<BetterI18nProvider config={i18n.config} locale={locale} messages={messages}>
{children}
</BetterI18nProvider>
// Any component
const t = useTranslations("namespace");
return <h1>{t("title")}</h1>;Erstellen Sie ein kostenloses Konto, fügen Sie Ihre Sprachen hinzu und beginnen Sie mit dem Übersetzen. Schließen Sie sich Tausenden von Entwicklern an, die für ein globales Publikum entwickeln.