En la aplicación Next.js, estoy usando el módulo next-i18next para varios idiomas, que funciona bien. Hay dos idiomas uno inglés y el otro árabe. El valor predeterminado es inglés.

Para alternar, estoy usando el siguiente código en NavBar .

 import { useRouter} from "next/router" import { useTranslation } from 'next-i18next' import { useState } from 'react' const NavBar = ({...props}) => { const router = useRouter() const { t } = useTranslation('navbar'); const [language, setLanguage] = useState(router.locale) const onChangeLanguage = (lang) => (e)=> { e.preventDefault() if(lang === 'ar') { router.push('ar') } else { router.push('/') } } return ( <> ..... ..... <div className="form-check form-check-inline"> <input type="checkbox" className="form-check-input" id="en" onClick={onChangeLanguage('en')} value="en" defaultChecked = {language === 'en'} /> <label className="form-check-label" htmlFor="inlineCheckbox1">English</label> </div> <div className="form-check form-check-inline"> <input type="checkbox" className="form-check-input" id="ar" onClick={onChangeLanguage('ar')} value="ar" defaultChecked = {language === 'ar'} /> <label className="form-check-label" htmlFor="inlineCheckbox2">Arabic</label> </div> </> ) } export default NavBar;

Entonces, en la página de inicio, es decir http://localhost:3000 , cuando verifico el idioma árabe, agrega /ar después de la URL y funciona bien, pero crea problemas en las páginas internas.

Tengo una estructura de páginas como

 pages index.js settings locations index.js add.js edit [...id].js products index.js add.js edit [...id].js

Si trato de cambiar la configuración regional de en a ar en la página interna, por ejemplo, http://localhost:3000/settings/products , entonces se redirige a la URL http://localhost:3000/settings/ar donde no encuentra ninguna. ruta por lo que aparece 404.

En caso de que haya establecido una configuración regional desde la página de inicio [ http://localhost:3000/ar ar , entonces si cambio la configuración regional de ar a en en cualquier página interna, por ejemplo, http:localhost:3000/ar/settings/localtion/edit/<UUID> entonces no establece el idioma como en .