Better I18NÜber dieses Starter-Template
Dies ist eine Starter-Vorlage, die zeigt, wie man better-i18n mit dem Next.js App Router für mehrsprachige Anwendungen verwendet.
Technologie-Stack
Next.js 15
App Router + Server Components
@better-i18n/next
CDN-gestützte Übersetzungen
next-intl
Typsichere Übersetzungs-Hooks
Tailwind CSS 4
Utility-First-Styling
TypeScript 5
Vollständige Typsicherheit
CDN-Übersetzungsarchitektur
Mehr erfahrenbetter-i18n verwendet eine CDN-First-Architektur. Wenn Sie Übersetzungen im Dashboard veröffentlichen, werden diese im globalen Edge-Netzwerk von Cloudflare für weltweite Auslieferung unter 50 ms bereitgestellt.
Dashboard-Veröffentlichung
Übersetzungen werden vom better-i18n Dashboard in den Cloudflare R2-Speicher veröffentlicht.
Edge-CDN-Auslieferung
Übersetzungspakete werden von globalen Edge-Standorten mit Ladezeiten unter 50 ms bereitgestellt.
Server-seitiges Rendering
Next.js-Serverkomponenten rufen Übersetzungen zur Anfragezeit über getMessages() für SEO-freundliches HTML ab.
Client-Hydratisierung
BetterI18nProvider hydratisiert Übersetzungen clientseitig ohne Layout-Verschiebung. useSetLocale() ermöglicht sofortigen Sprachwechsel.
Das SDK speichert Manifestdaten standardmäßig 5 Minuten und Übersetzungsnachrichten 30 Sekunden im Cache. Die Cache-Invalidierung erfolgt beim Veröffentlichen automatisch.
In diesem Starter verwendete SDK-APIs
Vollständige API-Referenz| API | Typ | Zweck |
|---|---|---|
createI18n() | Config | SDK mit Projekteinstellungen initialisieren |
i18n.betterMiddleware() | Server | Spracherkennung aus URL, Cookie oder Accept-Language |
i18n.getMessages(locale) | Server | Alle Übersetzungen für eine Sprache laden |
i18n.getLocales() | Server | Verfügbare Sprachen vom CDN abrufen |
BetterI18nProvider | Client | React-Kontext für Übersetzungen |
useTranslations(ns) | Client | Typsicherer Übersetzungszugriff |
useSetLocale() | Client | Sofortiger Sprachwechsel |
useManifestLanguages() | Client | Dynamische Spracherkennung vom CDN |
So funktioniert es
Übersetzungen werden im better-i18n Dashboard verwaltet und über CDN bereitgestellt. Die Middleware erkennt das Gebietsschema des Benutzers aus der URL, dem Cookie oder der Browsersprache. Nachrichten werden serverseitig geladen und an den BetterI18nProvider für Client-Komponenten übergeben.
Verfügbare Sprachen
Diese Sprachen werden zur Build-Zeit über die serverseitige API i18n.getLocales() vom CDN abgerufen.
Sprachen verwalten über das better-i18n Dashboard.