Por que isso é importante
Como fazer i18n em React com i18next? Resources JSON + useTranslation + namespaces + fallbackLng. Locale strategy — não string colada no JSX. Em Next App Router, avalie next-intl no server vs i18next no client; plurais PT-BR entram no resource, não no componente.
Leitura relacionada: curso de React · curso de Next.js · guia prático de TypeScript com React · i18next no React Native · estado atual do stack frontend.
Por que Internacionalizar seu Projeto React?
Internacionalizar com i18next evita hardcode de cópia: trocar idioma sem fork do JSX, namespaces por domínio e fallback quando a chave falta.
i18next vs react-intl: A Escolha Certa
Comparação detalhada entre as duas principais bibliotecas de internacionalização para React
✅ Vantagens
- • Flexibilidade total na configuração
- • Vasto ecossistema e plugins
- • Fallback automático entre idiomas
- • Funciona em Node.js e frontend
- • Comunidade ativa e madura
⚠️ Desvantagens
- • Curva de aprendizado inicial
- • Documentação extensa (pode intimidar)
✅ Vantagens
- • Alinhado aos padrões JavaScript
- • Integração simples
- • Compatibilidade com navegadores modernos
⚠️ Desvantagens
- • Menos flexibilidade
- • Suporte limitado a plugins
- • Ecossistema menor
Guia Prático: Implementando i18next no React
Passo a passo completo para internacionalizar sua aplicação React
npm install i18next i18next-chained-backend i18next-http-backend i18next-resources-to-backend react-i18next next-i18nextCrie um arquivo i18n.js para configurar o i18next:
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng: 'pt-br',
interpolation: { escapeValue: false }
});
export default i18n;Crie arquivos JSON em locales/pt-br/translation.json e locales/en/translation.json:
{
"welcome": "Bem-vindo à nossa aplicação!",
"login": "Entrar",
"logout": "Sair",
"language": "Idioma"
}Use o hook useTranslation em seus componentes React:
import React from 'react';
import { useTranslation } from 'react-i18next';
function App() {
const { t } = useTranslation();
return (
<div>
<h1>{t('welcome')}</h1>
<button>{t('login')}</button>
</div>
);
}Implemente um componente para trocar idiomas:
import React from 'react';
import { useTranslation } from 'react-i18next';
function LanguageSwitcher() {
const { i18n } = useTranslation();
const changeLanguage = (lng) => {
i18n.changeLanguage(lng);
localStorage.setItem('language', lng);
};
return (
<div>
<button onClick={() => changeLanguage('pt-br')}>🇧🇷 Português</button>
<button onClick={() => changeLanguage('en')}>🇺🇸 English</button>
</div>
);
}Implementação Avançada com Context API
Como criar um sistema robusto de internacionalização usando Context API do React
"use client";
import { useTranslation } from "react-i18next";
import { createContext, useState, useContext } from "react";
const I18NContext = createContext({} as any);
export const isBrowser = typeof window !== "undefined";
export const I18nProvider = ({ children }: any) => {
const { i18n } = useTranslation() || {};
const [currentLanguage, setCurrentLanguage] = useState(
formatLanguageFromi18N(i18n?.language)
);
const changeLanguage = (language) => {
setCurrentLanguage(language);
i18n?.changeLanguage?.(formatLanguageFromSelect(language));
localStorage.setItem("language", formatLanguageFromSelect(language));
};
return (
<I18NContext.Provider value={{
changeLanguage,
currentLanguage,
setCurrentLanguage
}}>
{children}
</I18NContext.Provider>
);
};
export const useI18n = () => {
if (!isBrowser) {
return {
currentLanguage: "pt-br",
setCurrentLanguage: () => {},
changeLanguage: () => {},
};
}
return useContext(I18NContext);
};Tutorial i18n em React: passo a passo
Aprenda React internacionalização com o melhor tutorial em português
- • Configuração inicial do React i18next
- • Hook useTranslation explicado
- • Namespace e chaves de tradução
- • Interpolação de variáveis
- • Pluralização automática
- • Estrutura de pastas para traduções
- • Lazy loading de idiomas
- • TypeScript com i18next
- • Testing de componentes traduzidos
- • Performance optimization
Como Criar App Multilíngue React
Guia completo para desenvolver aplicações React multilíngues profissionais
// Hook personalizado para tradução dinâmica
import { useTranslation } from 'react-i18next';
import { useEffect } from 'react';
export const useDynamicTranslation = (namespace = 'common') => {
const { t, i18n } = useTranslation(namespace);
const changeLanguage = async (lng: string) => {
await i18n.changeLanguage(lng);
document.documentElement.lang = lng;
localStorage.setItem('preferred-language', lng);
};
return { t, changeLanguage, currentLanguage: i18n.language };
};// Configuração de rotas com idioma
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
export const LocalizedRouter = () => {
const { i18n } = useTranslation();
return (
<BrowserRouter>
<Routes>
<Route path="/:lang/home" element={<HomePage />} />
<Route path="/:lang/about" element={<AboutPage />} />
<Route path="/" element={
<Navigate to={`/${i18n.language}/home`} replace />
} />
</Routes>
</BrowserRouter>
);
};Next.js i18n: Internacionalização Completa
Implementando i18next em aplicações Next.js com SSR e SSG
// app/[locale]/layout.tsx
import { notFound } from 'next/navigation';
import { ReactNode } from 'react';
const locales = ['en', 'pt-br', 'es'];
interface RootLayoutProps {
children: ReactNode;
params: { locale: string };
}
export default function RootLayout({
children,
params: { locale }
}: RootLayoutProps) {
if (!locales.includes(locale)) notFound();
return (
<html lang={locale}>
<body>{children}</body>
</html>
);
}// lib/server-i18n.ts
import { createInstance } from 'i18next';
import resourcesToBackend from 'i18next-resources-to-backend';
export async function getServerTranslation(locale: string) {
const i18nInstance = createInstance();
await i18nInstance
.use(resourcesToBackend((language: string) =>
import(`../locales/${language}/common.json`)
))
.init({
lng: locale,
fallbackLng: 'en',
interpolation: { escapeValue: false }
});
return i18nInstance.getFixedT(locale);
}i18next ou next-intl no App Router?
Tutoriais só Vite/CSR param no useTranslation. Em 2026 o fork prático é:
| Lib | Encaixa melhor | Cuidado |
|---|---|---|
| react-i18next | SPA/CSR, React Native, apps já no i18next | No App Router: hidratação e onde o bundle de locale carrega |
| next-intl | RSC/App Router, middleware/locale prefix, rotas /[locale] | Prefira em greenfield Next com muito server component |
Se o restante deste guia usa i18next, mantenha no client islands; se for greenfield Next 15/16 com muito RSC, avalie next-intl em vez de forçar i18next no server.
Namespaces, lazy load e plurais PT-BR
Particione JSON por namespace (common, auth, billing) e carregue sob demanda (http-backend / dynamic import) para não empurrar todo o dicionário no first paint. Plurais em pt-BR com i18next/ICU:
"items_count": "{{count}} item",
"items_count_plural": "{{count}} itens"
// t('items_count', { count: 1 }) → "1 item"
// t('items_count', { count: 3 }) → "3 itens"Locale routing (/pt, /en) e hreflang pedem consistência com o prefixo da URL — detalhe de SEO técnico fica em artigo dedicado; aqui o foco é não quebrar plural e namespace.
React i18next Hooks: Guia Completo
Dominando todos os hooks do React i18next para máxima eficiência
// Uso avançado do useTranslation
import { useTranslation } from 'react-i18next';
export const UserProfile = () => {
const { t, ready } = useTranslation('profile', {
useSuspense: false
});
if (!ready) return <Loading />;
return (
<div>
<h1>{t('title', { name: 'João' })}</h1>
<p>{t('description', { count: 5 })}</p>
</div>
);
};import { Trans } from 'react-i18next';
<Trans
i18nKey="welcome.message"
values={{ name: 'Maria' }}
components={{
bold: <span className="font-bold" />,
link: <Link href="/profile" />
}}
/>const { t, ready } = useTranslation([
'common',
'navigation',
'forms'
], {
useSuspense: false
});React i18next: Perguntas Frequentes
Respostas para as dúvidas mais comuns sobre internacionalização React
Para configurar React i18next, você precisa instalar as dependências, criar arquivos de tradução, configurar o i18n.js e implementar o provider na sua aplicação. Veja o guia completo acima.
Sim! React i18next tem suporte completo ao TypeScript. Você pode criar tipos para suas traduções e ter autocomplete nas chaves de tradução. Use react-i18next/TypeScript para configuração avançada.
Use o i18next-http-backend para carregar traduções sob demanda ou i18next-resources-to-backend para import dinâmico. Isso melhora a performance carregando apenas os idiomas necessários.
React i18next é mais flexível e tem um ecossistema maior, sendo ideal para projetos complexos. React-intl é mais simples mas menos flexível. Para a maioria dos casos, recomendamos i18next.
Benefícios SEO da Internacionalização
Como a internacionalização pode melhorar drasticamente seu ranking nos motores de busca
Aprenda Desenvolvimento Avançado
No CrazyStack você aprende a construir aplicações completas com arquitetura profissional
🚀 API REST (Node.js)
- • Sistema de agendamentos completo
- • Clean Architecture e SOLID
- • Design Patterns avançados
- • TypeScript e MongoDB
- • Testes unitários e E2E
⚛️ Painel Admin (React)
- • Dashboard com gráficos
- • Next.js e TypeScript
- • Chakra UI e Atomic Design
- • Feature Sliced Design
- • Internacionalização completa
Fontes
Revisão em agosto de 2026. i18next e react-i18next mudam APIs entre majors — App Router (RSC vs client) exige estratégia explícita de locale. Tutorial de padrão; valide no changelog oficial.
Perguntas frequentes
Como fazer internacionalização em React com i18next?
Instale i18next + react-i18next, carregue JSON por locale/namespace e use useTranslation nos componentes. Evite texto hardcoded na UI.
react-i18next funciona com Next.js App Router?
Sim, com cuidado: separe server e client components, carregue namespaces no lugar certo e defina fallbackLng. Em apps RSC-heavy, avalie também next-intl.
Preciso de um arquivo JSON por idioma?
Namespaces/JSON por locale é o padrão. Mantenha chaves estáveis e plurais/ICU quando o idioma exigir.
Qual a diferença entre i18next e next-intl?
i18next é genérico (React/SPA); next-intl é otimizado para App Router/RSC e roteamento por locale. Escolha pelo runtime — não misture estratégias de URL sem plano de hreflang.
Continue explorando: curso de React · curso de Next.js · guia prático de TypeScript com React · i18next no React Native · estado atual do stack frontend.