Next.js Internationalisering Functies

Alles wat u nodig hebt om meertalige Next.js-applicaties te bouwen. CDN-aangedreven vertalingen, server-side rendering en directe taalwisseling.

Aan de slag Dashboard openen

CDN-levering

Vertalingen worden geserveerd vanuit edge-locaties wereldwijd via Cloudflare CDN. Laadtijden onder de 50ms met automatische cache-invalidatie bij publicatie.

Meer over CDN-levering

Server-side rendering

Berichten worden server-side geladen in uw layout via getMessages(). Geen flash van onvertaalde inhoud, volledig SEO-vriendelijk met voorgerenderde vertalingen.

API-referentie bekijken

Directe taalwisseling

Wissel talen aan de clientzijde met useSetLocale() zonder volledige pagina-herlaad. BetterI18nProvider haalt nieuwe vertalingen op van CDN en rendert direct opnieuw.

Client-side documentatie

Dynamische taalontdekking

useManifestLanguages() haalt beschikbare talen op uit het CDN-manifest. Voeg een taal toe in het dashboard en het verschijnt automatisch in je app.

Hooks verkennen

Typeveilige vertaalsleutels

Gebouwd op next-intl met volledige TypeScript-ondersteuning. useTranslations() biedt controle bij compilatie voor vertaalsleutels — fouten opsporen vóór runtime.

Typeveilige API-documentatie

AI-gestuurde vertaling

Ontvang AI-vertaalsuggesties in het better-i18n dashboard. Een menselijk goedkeuringsproces waarborgt de kwaliteit. Vertaal hele projecten in minuten, niet in dagen.

Probeer het dashboard

Middleware taaldetectie

betterMiddleware() detecteert de gebruikerstaal vanuit het URL-pad, cookie of Accept-Language header. Callback-patroon in Clerk-stijl voor eenvoudige auth-integratie.

Handleiding middleware-instelling

Dashboard beheer

Beheer vertalingen, talen en naamruimten via dash.better-i18n.com. Realtime samenwerking, versiegeschiedenis en GitHub-integratie.

Dashboard openen

Integration Journey

Get up and running in 4 simple steps.

Install

Add the SDK to your project

bun add @better-i18n/next

Configure

Create your i18n config

export const i18n = createI18n({ ... })

Wrap Provider

Add BetterI18nProvider to your layout

<BetterI18nProvider>

Use Translations

Call useTranslations() in any component

const t = useTranslations("ns")

Framework Compatibility

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	✓	—	✓	✓	✓

Snelle integratie

Voeg internationalisering toe aan je Next.js-app in minder dan 5 minuten. Volg de volledige handleiding

i18n.config.ts

// 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>;

Klaar voor meertaligheid?

Maak een gratis account aan, voeg je talen toe en begin met vertalen. Sluit je aan bij duizenden ontwikkelaars die bouwen voor een wereldwijd publiek.

Documentatie lezen Dashboard openen

Aan het laden...

Feature

Next.js

Expo

Remix

Hono

TanStack

CDN Fetch

✓

ISR / Revalidation

✓

—

✓

—

✓

useSetLocale()

✓

useFormatter()

✓

LocaleDropdown

✓

SSR Support

✓

—

✓

// 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>;