Better I18NOver dit startpakket
Dit is een starterstemplate dat laat zien hoe je better-i18n gebruikt met Next.js App Router voor het bouwen van meertalige applicaties.
Technische stack
Next.js 15
App Router + Servercomponenten
@better-i18n/next
CDN-aangedreven vertalingen
next-intl
Typeveilige vertaalhooks
Tailwind CSS 4
Utility-first styling
TypeScript 5
Volledige typeveiligheid
CDN-vertaalarchitectuur
Meer informatiebetter-i18n gebruikt een CDN-first architectuur. Wanneer je vertalingen publiceert via het dashboard, worden ze uitgerold op het wereldwijde edge-netwerk van Cloudflare voor levering onder de 50ms overal ter wereld.
Dashboard publicatie
Vertalingen worden gepubliceerd vanuit het better-i18n dashboard naar Cloudflare R2-opslag.
Edge CDN-levering
Vertaalbundels worden geserveerd vanuit wereldwijde edge-locaties met laadtijden onder de 50ms.
Server-side rendering
Next.js servercomponenten halen vertalingen op bij elke aanvraag via getMessages() voor SEO-vriendelijke HTML.
Client-hydratatie
BetterI18nProvider hydrateert vertalingen aan de clientzijde zonder layoutverschuiving. useSetLocale() maakt directe wisseling mogelijk.
De SDK slaat manifestgegevens standaard 5 minuten en vertaalberichten 30 seconden op in cache. Cache-invalidatie vindt automatisch plaats bij publicatie.
SDK API's gebruikt in dit starterspakket
Volledige API-referentie| API | Type | Doel |
|---|---|---|
createI18n() | Config | Initialiseer SDK met projectinstellingen |
i18n.betterMiddleware() | Server | Taaldetectie via URL, cookie of Accept-Language |
i18n.getMessages(locale) | Server | Alle vertalingen laden voor een taal |
i18n.getLocales() | Server | Beschikbare talen ophalen van CDN |
BetterI18nProvider | Client | React-context voor vertalingen |
useTranslations(ns) | Client | Typeveilige toegang tot vertalingen |
useSetLocale() | Client | Directe taalwisseling |
useManifestLanguages() | Client | Dynamische taalontdekking van CDN |
Hoe het werkt
Vertalingen worden beheerd in het better-i18n dashboard en geleverd via CDN. De middleware detecteert de taal van de gebruiker uit de URL, cookie of browsertaal. Berichten worden server-side geladen en doorgegeven aan de BetterI18nProvider voor clientcomponenten.
Beschikbare talen
Deze locales worden tijdens de build opgehaald van de CDN met behulp van de server-side API i18n.getLocales().
Beheer talen via het better-i18n dashboard.