Aprenda a implementar internacionalização (i18n) em React de forma profissional usando i18next. Transforme seu projeto em uma aplicação multilíngue e global.
A internacionalização não é apenas uma funcionalidade, é um diferencial competitivo que pode transformar sua carreira e seus projetos.
Comparação detalhada entre as duas principais bibliotecas de internacionalização para 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>
);
}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);
};Aprenda React internacionalização com o melhor tutorial em português
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>
);
};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);
}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: <strong />,
link: <a href="/profile" />
}}
/>const { t, ready } = useTranslation([
'common',
'navigation',
'forms'
], {
useSuspense: false
});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.
Como a internacionalização pode melhorar drasticamente seu ranking nos motores de busca
No CrazyStack você aprende a construir aplicações completas com arquitetura profissional