Internationalisation avec Next.js Fonctionnalités

Tout ce dont tu as besoin pour créer des applications Next.js multilingues. Traductions via CDN, rendu côté serveur et changement de langue instantané.

Commencer Ouvrir le dashboard

Livraison par CDN

Les traductions sont servies depuis des emplacements edge mondiaux via Cloudflare CDN. Temps de chargement inférieurs à 50 ms avec invalidation automatique du cache à la publication.

En savoir plus sur la livraison CDN

Rendu côté serveur

Les messages sont chargés côté serveur dans ton layout via getMessages(). Aucun scintillement de contenu non traduit, complètement optimisé pour le SEO avec des traductions pré-rendues.

Voir la référence API

Changement de langue instantané

Change de langue côté client avec useSetLocale() — sans rechargement complet de la page. BetterI18nProvider récupère les nouvelles traductions depuis le CDN et fait le rendu instantanément.

Documentation client

Découverte dynamique des langues

useManifestLanguages() récupère les langues disponibles depuis le manifeste CDN. Ajoute une langue dans le dashboard et elle apparaît automatiquement dans ton app.

Explorer les hooks

Clés de traduction avec types sûrs

Basé sur next-intl avec un support TypeScript complet. useTranslations() offre une vérification à la compilation pour les clés de traduction — détecte les erreurs avant l'exécution.

Documentation API avec types sûrs

Traduction par IA

Obtiens des suggestions de traduction par IA dans le dashboard better-i18n. Le processus de validation humaine garantit la qualité. Traduis des projets entiers en minutes, pas en jours.

Essayer le dashboard

Détection de la langue dans le middleware

betterMiddleware() détecte la langue de l'utilisateur depuis le chemin URL, le cookie ou l'en-tête Accept-Language. Modèle de callback de style Clerk pour une intégration facile de l'authentification.

Guide de configuration du middleware

Gestion du dashboard

Gère les traductions, les langues et les namespaces depuis dash.better-i18n.com. Collaboration en temps réel, historique des versions et intégration GitHub.

Ouvrir le dashboard

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

Intégration rapide

Ajoute l'internationalisation à ton app Next.js en moins de 5 minutes. Suivre le guide complet

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

Prêt à passer au multilingue ?

Crée un compte gratuit, ajoute tes langues et commence à traduire. Rejoins des milliers de développeurs qui créent pour une audience mondiale.

Lire la documentation Ouvrir le dashboard

Chargement...

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