In the Next.js app, I am using the next-i18next module for multi-language which is working fine. There are two languages one English and the other Arabic. Default is English.
For toggle, I am using the following code in 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;
So on the homepage i.e. http://localhost:3000 when I check the Arabic language then it appends /ar after the URL and works good but it creates issues in the internal pages.
I have pages structure like
pages
index.js
settings
locations
index.js
add.js
edit
[...id].js
products
index.js
add.js
edit
[...id].js
If I try to change the locale from en to ar on the internal page e.g. http://localhost:3000/settings/products then it redirects on the http://localhost:3000/settings/ar URL where it does not find any route so 404 appears.
In case if I have set ar locale from the homepage [http://localhost:3000/ar] then If I change the locale from ar to en on any internal page e.g. http:localhost:3000/ar/settings/localtion/edit/<UUID> then it does not set language as en.
To keep the current route but change the locale, you can use router.asPath as the url then pass the locale in the options object (third argument) of router.push.
const onChangeLanguage = (lang) => (e) => {
e.preventDefault()
router.push(router.asPath, undefined, { locale: lang })
}