Tengo el requisito de implementar traducciones para un proyecto de reacción js.
En mi proyecto src/locale/i18n.js archivo
import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import Backend from 'i18next-http-backend'; i18n // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(Backend) .use(LanguageDetector) // pass the i18n instance to react-i18next. .use(initReactI18next) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ debug: true, fallbackLng: 'en', interpolation: { escapeValue: false, // not needed for react as it escapes by default }, }); export default i18n;Y importo este archivo a index.js
import './locales/i18n' ReactDOM.render( <React.StrictMode> <Suspense fallback="Loading..."> <App /> </Suspense> </React.StrictMode>, document.getElementById('root') );Y en mi app.js
import { useTranslation, Trans } from 'react-i18next'; function App() { const { t, i18n } = useTranslation(); const changeLanguage = (lang) => { i18n.changeLanguage(lang) } return ( <div className="App"> {t('description.part2')} <button onClick={() => changeLanguage('en')}>EN</button> <button onClick={() => changeLanguage('si')}>SI</button> </div> ); } también, mis claves de traducción ubicadas en public/locales/en/transalation.json y public/locales/si/transalation.json
Esta configuración funciona perfectamente bien. Pero necesito cargar mis traducciones desde una API de back-end. Tiene algunos archivos JSON y este es el formato de URL
BASEURL/locales/Language/NameSpace.json
Tiene pocos NameSpaces como
Informes
Común
Tablero
Entonces, si ejecuta la traducción al inglés para NameSpace común,
BASEURL/locales/Language/NameSpace.json El servidor devuelve un objeto JSON como este
{ "com:search":"search", "com:logout":"logout" }¿Cómo llamo a estos puntos finales de API una vez y los envío a la instancia i18n? Entonces puedo usar estas claves de traducción en cualquier parte del proyecto de esta manera
<h2>{t("common:com-description")}</h2>Supongo que es mejor, si escribe un script para descargar la traducción en la carpeta public/locales/si/transalation.json
update-i18n.js
const UpdateTranslation = async()=> { // get translation from backend const data = await fetch('url') if (!fs.existsSync(`./public/locales`)) fs.mkdirSync(`./public/locales`); [data].forEach((lang) => { if (!fs.existsSync(`./public/locales/${lang}`)) fs.mkdirSync(`./public/locales/${lang}`); fs.writeFile( `./public/locales/${lang}/common.json`, JSON.stringify(result[lang], null, 2), function (err) { if (err) return console.log('Error: ', err); console.log(`/public/locales/${lang}/common.json - updated`); } ); } })