Tengo un problema con la configuración de mi i18next. Hay una advertencia que dice react-i18next:: You will need to pass in an i18next instance by using initReactI18next y si actualizo la página, todo aparece como nombres de variables.

este es mi archivo i18n.ts:

 import i18n from 'i18next'; import Backend from 'i18next-http-backend'; import LanguageDetector from 'i18next-browser-languagedetector'; import { initReactI18next } from 'react-i18next'; const backend = new Backend({ // path where resources get loaded from loadPath: '../locales/{{lng}}/{{ns}}.json', }); i18n // load translation using http -> see /public/locales // learn more: https://github.com/i18next/i18next-http-backend .use(backend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .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({ fallbackLng: 'EN', debug: false, interpolation: { escapeValue: false, }, react: { useSuspense: false, }, }); export default i18n;

Obtuve esto del documento oficial.

Lo uso de la siguiente manera en mi proyecto:

 import { useTranslation } from 'react-i18next'; const MyComponent () => { //... const { t } = useTranslation(); //... return (<>{t("COMMONS.SAY_HI")}</>) }

Tengo un proyecto básico de nextjs con mecanografiado. Este error ocurre solo en una página específica, pero las cosas parecen usarse de la misma manera en todas partes y no puedo entender cuál es el problema.

Además, cuando construyo el proyecto, en todas partes veo solo las variables de nombre en lugar de su contenido. ¿Hay algún problema con la pila de ejecución o algo así?