Platform Features

Next.js Internationalization Features

Everything you need to build multilingual Next.js applications. CDN-powered translations, server-side rendering, and instant locale switching.

Get Started Open Dashboard

CDN-Powered Delivery

Translations are served from edge locations worldwide via Cloudflare CDN. Sub-50ms load times with automatic cache invalidation on publish.

Learn about CDN delivery

Server-Side Rendering

Messages are loaded server-side in your layout using getMessages(). No flash of untranslated content, fully SEO-friendly with pre-rendered translations.

View API reference

Instant Locale Switching

Switch languages client-side with useSetLocale() — no full page reload. The BetterI18nProvider fetches new translations from CDN and re-renders instantly.

Client-side docs

Dynamic Language Discovery

useManifestLanguages() fetches available languages from CDN manifest. Add a language in the dashboard and it appears in your app automatically.

Explore hooks

Type-Safe Translation Keys

Built on next-intl with full TypeScript support. useTranslations() provides compile-time checking for translation keys — catch errors before runtime.

Type-safe API docs

AI-Powered Translation

Get AI translation suggestions in the better-i18n dashboard. Human approval workflow ensures quality. Translate entire projects in minutes, not days.

Try the dashboard

Middleware Locale Detection

betterMiddleware() detects user locale from URL path, cookie, or Accept-Language header. Clerk-style callback pattern for easy auth integration.

Middleware setup guide

Dashboard Management

Manage translations, languages, and namespaces from dash.better-i18n.com. Real-time collaboration, version history, and GitHub integration.

Open dashboard

Quick Integration

Add internationalization to your Next.js app in under 5 minutes. Follow the full guide

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

Ready to go multilingual?

Create a free account, add your languages, and start translating. Join thousands of developers building for a global audience.

Read the Docs Open Dashboard

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