const languages = [ { code: 'en', name: 'English', }, { code: 'id', name: 'Bahasa', }, ] i18next .use(HttpApi) .use(LanguageDetector) .use(initReactI18next) .init({ supportedLngs: ['en', 'id'], fallbackLng: 'en', debug: false, // Options for language detector detection: { order: ['path', 'cookie', 'htmlTag'], caches: ['cookie'], }, // react: { useSuspense: false }, backend: { loadPath: '/assets/locales/{{lng}}/translation.json', }, }) const Index = ({ courses, categories }) => { const currentLanguageCode = cookies.get('i18next') || 'en' const currentLanguage = languages.find((l) => l.code === currentLanguageCode) const { t } = useTranslation()

Estoy siguiendo un tutorial de youtube sobre cómo hacer esto, pero parece que no funciona en mi aplicación web. En el video, usan reaccionar mientras yo uso next.js (que también usa react.js), así que supongo que funcionará. El código que está escrito arriba está en index.js en la carpeta de páginas. Configuré un cambio de idioma en la barra de navegación y durante un tiempo después de iniciarlo funcionaría normalmente, pero cuando actualizo la página se atascará en la carga. Intenté analizar el problema y parece que el problema es mientras la aplicación está obteniendo datos de las cookies o en i18next.use (initReactI18next) porque cuando elimino la parte i18next.use, el código pasa pero no muestra el traducción.

Todavía no sé la solución aquí, así que cualquier ayuda sería apreciada. Gracias por adelantado.

(Nota: si hay mejores formas de hacer una página en varios idiomas, es posible que desee buscar otros métodos en su lugar)