Internacionalizando um projeto React

yarn react-i18next i18next i18next-browser-languagedetector i18next-http-backend

// src/i18n.js

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import Backend from 'i18next-http-backend'
 
i18n
	 .use(Backend) 
	 .use(LanguageDetector) 
	 .use(initReactI18next)
	 .init({ 
	   fallbackLng: 'pt-BR',
	   supportedLngs: ['pt-BR', 'en-US'],
	 });
 
export default i18n;

// src/App.jsx
import React, { Suspense } from 'react'
import Routes from './routes'

export default function App() {
	return (
		<Suspense fallback="loading">
				<Routes />
		</Suspense>
	)
}

// src/index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

// internacionalization
import './i18n'

ReactDOM.render(
    <App />,
    document.getElementById('root')
)

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

export default function Footer() {
	const { t } = useTranslation()

	return (
		<footer>
			{t('app.made_by')}
			{' '}
			<a
				href="https://www.harpiahealth.com/"
				target="_blank"
				rel="noreferrer"
			>
				André Arruda
			</a>
		</footer>
	)
}

{
    "app": {
        "made_by": "Made by",
    }
}

{
    "app": {
        "made_by": "Feito por",
    }
}