Internacionalização do Next.js Recursos

Tudo o que você precisa para criar aplicativos Next.js multilíngues. Traduções com base em CDN, renderização no lado do servidor e troca instantânea de localidade.

Começar a usar Abrir o painel

Entrega com tecnologia CDN

As traduções são servidas a partir de locações edge no mundo inteiro via Cloudflare CDN. Tempos de carregamento inferiores a 50 ms com invalidação automática do cache ao publicar.

Saiba mais sobre o fornecimento de CDN

Renderização no lado do servidor

As mensagens são carregadas no lado do servidor em seu layout usando getMessages(). Sem flash de conteúdo não traduzido, totalmente compatível com SEO e com traduções pré-renderizadas.

Exibir referência da API

Troca instantânea de idioma

Altere os idiomas no lado do cliente com useSetLocale() - sem recarregar a página inteira. O BetterI18nProvider obtém novas traduções do CDN e as renderiza novamente de forma instantânea.

Docs client-side

Descoberta dinâmica de idiomas

useManifestLanguages() busca os idiomas disponíveis no manifesto da CDN. Adicione um idioma no painel e ele aparecerá em seu aplicativo automaticamente.

Explorar hooks

Chaves de tradução com segurança de tipo

Criado com base no next-intl e com suporte total ao TypeScript. useTranslations() oferece verificação de tempo de compilação para chaves de tradução - capture erros antes do tempo de execução.

Documentos de API com segurança de tipo

Tradução com tecnologia de IA

Obtenha sugestões de tradução com IA no painel do better-i18n. O fluxo de trabalho de aprovação humana garante a qualidade. Traduza projetos inteiros em minutos, não em dias.

Experimente o painel de controle

Detecção de idioma via middleware

betterMiddleware() detecta o idioma do usuário a partir do caminho da URL, cookie ou cabeçalho Accept-Language. Padrão de callback estilo Clerk para fácil integração de autenticação.

Guia de configuração do middleware

Gerenciamento do painel

Gerencie traduções, idiomas e namespaces em dash.better-i18n.com. Colaboração em tempo real, histórico de versões e integração com o GitHub.

Abrir o painel

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

Integração rápida

Adicione internacionalização ao seu aplicativo Next.js em menos de 5 minutos. Siga o guia completo

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 para se tornar multilíngue?

Crie uma conta gratuita, adicione seus idiomas e comece a traduzir. Junte-se a milhares de desenvolvedores que estão criando para um público global.

Leia a documentação Abrir o painel

Carregando...

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