Internazionalizzazione Next.js Funzionalità

Tutto ciò che serve per creare applicazioni Next.js multilingua. Traduzioni via CDN, rendering lato server e cambio lingua istantaneo.

Inizia Apri Dashboard

Distribuzione CDN

Le traduzioni vengono servite da posizioni edge in tutto il mondo tramite Cloudflare CDN. Tempi di caricamento inferiori a 50ms con invalidazione automatica della cache alla pubblicazione.

Scopri la distribuzione CDN

Rendering lato server

I messaggi vengono caricati lato server nel layout tramite getMessages(). Nessun flash di contenuto non tradotto, completamente SEO-friendly con traduzioni pre-renderizzate.

Visualizza riferimento API

Cambio lingua istantaneo

Cambia lingua lato client con useSetLocale() senza ricaricare la pagina. BetterI18nProvider recupera le nuove traduzioni dal CDN e si re-renderizza istantaneamente.

Documentazione client

Scoperta dinamica delle lingue

useManifestLanguages() recupera le lingue disponibili dal manifest CDN. Aggiungi una lingua nella dashboard e appare automaticamente nella tua app.

Esplora gli hook

Chiavi di traduzione type-safe

Costruito su next-intl con pieno supporto TypeScript. useTranslations() fornisce il controllo delle chiavi di traduzione in fase di compilazione — intercetta gli errori prima del runtime.

Documentazione API type-safe

Traduzione con IA

Ottieni suggerimenti di traduzione basati su IA nella dashboard di better-i18n. Il flusso di approvazione umana garantisce la qualità. Traduci interi progetti in minuti, non in giorni.

Prova la dashboard

Rilevamento localizzazione tramite middleware

betterMiddleware() rileva la localizzazione dell'utente dal percorso URL, dal cookie o dall'intestazione Accept-Language. Pattern di callback stile Clerk per una facile integrazione con l'autenticazione.

Guida alla configurazione del middleware

Gestione dashboard

Gestisci traduzioni, lingue e namespace da dash.better-i18n.com. Collaborazione in tempo reale, cronologia versioni e integrazione con GitHub.

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

Integrazione rapida

Aggiungi l'internazionalizzazione alla tua app Next.js in meno di 5 minuti. Segui la guida completa

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

Pronto per il multilingua?

Crea un account gratuito, aggiungi le tue lingue e inizia a tradurre. Unisciti a migliaia di sviluppatori che costruiscono per un pubblico globale.

Leggi la documentazione Apri Dashboard

Caricamento...

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