Internacionalización con Next.js Funciones

Todo lo que necesitas para crear aplicaciones multilingües con Next.js. Traducciones por CDN, renderizado del lado del servidor y cambio instantáneo de idioma.

Comenzar Abrir dashboard

Entrega por CDN

Las traducciones se sirven desde ubicaciones edge en todo el mundo mediante Cloudflare CDN. Tiempos de carga inferiores a 50 ms con invalidación de caché automática al publicar.

Aprende sobre entrega por CDN

Renderizado del lado del servidor

Los mensajes se cargan en el servidor en tu layout usando getMessages(). Sin parpadeo de contenido sin traducir, totalmente amigable con SEO con traducciones pre-renderizadas.

Ver referencia de la API

Cambio instantáneo de idioma

Cambia de idioma en el cliente con useSetLocale() — sin recarga completa de página. BetterI18nProvider obtiene las nuevas traducciones del CDN y re-renderiza instantáneamente.

Documentación del cliente

Descubrimiento dinámico de idiomas

useManifestLanguages() obtiene los idiomas disponibles desde el manifiesto del CDN. Agrega un idioma en el dashboard y aparece automáticamente en tu app.

Explorar hooks

Claves de traducción con tipos seguros

Construido sobre next-intl con soporte completo de TypeScript. useTranslations() ofrece verificación en tiempo de compilación para claves de traducción — detecta errores antes de la ejecución.

Documentación de la API con tipos seguros

Traducción con IA

Obtén sugerencias de traducción con IA en el dashboard de better-i18n. El flujo de aprobación humana garantiza la calidad. Traduce proyectos enteros en minutos, no en días.

Probar el dashboard

Detección de idioma en el middleware

betterMiddleware() detecta el idioma del usuario desde la ruta URL, la cookie o el encabezado Accept-Language. Patrón de callback estilo Clerk para fácil integración de autenticación.

Guía de configuración del middleware

Gestión del dashboard

Gestiona traducciones, idiomas y namespaces desde dash.better-i18n.com. Colaboración en tiempo real, historial de versiones e integración con GitHub.

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

Integración rápida

Agrega internacionalización a tu app de Next.js en menos de 5 minutos. Seguir la guía 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>;

¿Listo para el multilingüismo?

Crea una cuenta gratis, agrega tus idiomas y empieza a traducir. Únete a miles de desarrolladores que crean para una audiencia global.

Leer la documentación Abrir dashboard

Cargando...

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