Primeiro instale as bibliotecas

Você precisa instalar todas as libs do react-i18next, i18next e i18next-http-backend

npm install react-i18next i18next i18next-http-backend --save

Crie o arquivo de configuração nos seus arquivos src do React App

Arquivo com nome i18n.js e este conteúdo abaixo

import i18n from "i18next";
import backend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";

i18n
  .use(backend)
  .use(initReactI18next)
  .init({
    lng: "pt",
    fallbackLng: "pt",
    interpolation: {
      escapeValue: false
    },
    react: {
      bindI18n: 'languageChanged',
      useSuspense: false,
    }
  });

export default i18n;

Importe este arquivo i18n.js no seu index.js do React App

Use estes imports do arquivo i18n.js e provider na configuração do seu App

import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

E use este provider no render do App

 <I18nextProvider i18n={i18n}>
   <App />
 </I18nextProvider>

Exemplo com index.js com provider e imports

Próximo exemplo com implementação de imports e provider no seu React App

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.scss';
import App from './App';

import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  </React.StrictMode>
);

Está ótimo, agora você precisa criar seus arquivos de tradução e usar nos seus componentes

Crie Arquivos de localidades traduzidas

Na pasta public você precisa criar esta pasta com nome locales e na pasta locales você cria todas as pastas por exemplo en ou pt ou es nomes dos seus arquivos de tradução Dentro da sua pasta você precisa criar um json com nome translate.json com suas ocorrências de tradução por exemplo seguindo este json abaixo

nome do arquivo: locales/en/translate.json

{
  "languages": {
    "pt": "Portuguese",
    "en": "English",
    "es": "Spanish"
  },
  "title": {
    "config": "Configuration"
  }
}

nome do arquivo: locales/pt/translate.json

{
  "languages": {
    "pt": "Português",
    "en": "Inglês",
    "es": "Espanhol"
  },
  "title": {
    "config": "Configurações"
  }
}

nome do arquivo: locales/es/translate.json

{
  "languages": {
    "pt": "Portugués",
    "en": "Inglés",
    "es": "Español"
  },
  "title": {
    "config": "Configurações"
  }
}

Muito bom, arquivos com traduções inglês, português e espanhol

Agora use sua tradução em componentes

Agora você precisa usar a tradução no componente e criar um select ou botão para mudar o idioma da localidade com o hook useTranslation

Um exemplo básico de uso no componente com um select para mudança de idioma

import React from 'react';
import { useTranslation } from 'react-i18next';

function AppLanguage() {
  const { t, i18n } = useTranslation();

  return (
    <React.Fragment>
      <h1>{t('title.config')}</h1>
      <select
        className="App-language"
        name="language"
        value={i18n.language}
        onChange={e => i18n.changeLanguage(e.target.value)}
      >
        <option value="pt">{t('languages.pt')}</option>
        <option value="en">{t('languages.en')}</option>
        <option value="es">{t('languages.es')}</option>
      </select>
    </React.Fragment>
  );
}

export default AppLanguage;

Pronto, você é um bom hacker e seu React App tem internacionalização com vários idiomas e acesso internacional para muitas pessoas em todo o mundo. Bons estudos e um ótimo #hacktoberfest

Referências

Se precisar de referências, siga a lista abaixo com mais exemplos

• O site oficial react-i18next
• Um projeto funcionando com implementação real Google React
• Meu perfil no Github @lucasferreiralimax

Precisa de ajuda?

Comente ou fale comigo Tenho prazer em ajudar você e prazer em conhecê-lo.