I just migrated to next.js and started using next-i18next instead of React i18n. my objective is to change the html page dir to right to left when choosing the Arabic language.
I was using a cookie to achieve this but I belive if I can get the value of locale in loginHeader.js component I can achieve that.
How to get the value of local ?
I highly appreciate your support.
loginHeader.js ;
import React, { Fragment, useEffect } from 'react';
import styles from '../styles/LoginHeader.module.css';
import Link from 'next/link';
import { connect } from 'react-redux';
import { logout } from '../actions/auth';
import SortIcon from '@mui/icons-material/Sort';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Alert from './Alert';
// import Drower from './Drower';
import Logo from '../assets/images/logoo.png';
import { useTranslation } from 'next-i18next';
import { Select, MenuItem } from '@mui/material';
import LanguageIcon from '@mui/icons-material/Language';
import { Link as Scroll } from 'react-scroll';
import Image from 'next/image';
import {useRouter} from 'next/router';
import i18n from '../../i18n';
import cookies from 'js-cookie';
const languages = [
{
code: 'fr',
name: 'Français',
country_code: 'fr'
},
{
code: 'en',
name : 'English',
country_code: 'en'
},
{
code: 'ar',
name: 'العربية',
country_code: 'ly',
dir: 'rtl'
}
]
//this is new code but the value isn't there
export function getServerSideProps({locale}) {
return {
props: {
locale
}
}
};
function LoginHeader(props, { logout, isAuthenticated }) {
// This is old code before migration
const currentLanguageCode = cookies.get('i18next') || 'en';
const currentLanguage = languages.find(l => l.code === currentLanguageCode);
useEffect (() => {
document.body.dir = currentLanguage.dir || 'ltr'
// document.title = t('app_title')
},[currentLanguage]);
const { t } = useTranslation();
const router = useRouter();
const guestLinks = () => (
<Fragment>
<div className={styles.loginHeader__right}>
<div className='middle__header__bx'>
<div className={styles.loginHeader__main__btns}>
<Link className={styles.loginHeader__loginButton} href='/login'><button className={styles.login__btn}>{t('header_login')}</button></Link>
<Link className={styles.loginHeader__signupButton} href='/signup'><button className={styles.signup__btn}>{t('header_signup')}</button></Link>
</div>
<div className={styles.loginHeader__services__dropdown}>
<Scroll offset={-100} to='services'><button className={styles['dropdown__btn']+' '+styles['dropdown__services']}>{t('header_services')}<ExpandMoreIcon className={styles.services__expand}/></button></Scroll>
<div className={styles['dropdown__content']+' '+styles['dropdown__services__content']}>
<Link className={styles.loginHeader__menuItem} href='/admission'>{t('services_addmissionOffers')}</Link>
{/* <Link className='loginHeader__menuItem' to='/application-form'>{t('services_forms')}</Link> */}
<Link className={styles.loginHeader__menuItem} href='/premuim-support'>{t('services_premium')}</Link>
<Link className={styles.loginHeader__menuItem} href='/visa-assist'>{t('services_visaAssist')}</Link>
</div>
</div>
{/* start of lang box */}
<Select
className={styles.loginHeader__select}
labelId='select-demo'
id='language-select'
disableUnderline
variant='standard'
IconComponent={LanguageIcon}
>
{router.locales.map((locale) => (
<MenuItem
className={styles.loginHeader__select__menu}
key={locale}
>
<Link href={router.asPath} locale={locale}>
<a>{locale}</a>
</Link>
</MenuItem>
))}
</Select>
{/* end of lang box */}
<div className={styles['loginHeader__services__dropdown']+' '+styles['sortIcon__bx']}>
<SortIcon className={styles['dropdown__btn']+' '+styles['loginHeader__sortIcon']}/>
<div className={styles['dropdown__content']+' '+styles['sortIcon__dropdown']}>
<Link className={styles.loginHeader__menuItem} href='/premuim-support'>{t('header_dropdown_prem')}</Link>
<Link className={styles.loginHeader__menuItem} href='/visa-assist'>{t('header_dropdown_visaAssist')}</Link>
<Link className={styles.loginHeader__menuItem} href='/admission'>{t('header_dropdown_admission')}</Link>
<Link className={styles.loginHeader__menuItem} href='/request-service'>{t('header_dropdown_requestService')}</Link>
<Link className={styles.loginHeader__menuItem} href='/contact'>{t('header_dropdown_contact')}</Link>
<Link className={styles.loginHeader__menuItem} href='/signup'>{t('header_signup')}</Link>
<Link className={styles.loginHeader__menuItem} href='/login'>{t('header_login')}</Link>
<Link className={styles.loginHeader__menuItem} href='/guid'>{t('header_dropdown_guide')}</Link>
</div>
</div>
</div>
</div>
</Fragment>
);
const authLinks = () => (
<Fragment>
<div className={styles.loginHeader__right}>
<div className={styles.middle__header__bx}>
<div className={styles.loginHeader__main__btns}>
<Link className={styles.loginHeader__loginButton} href='/login'><button className={styles.login__btn}>{t('header_login')}</button></Link>
<Link className={styles.loginHeader__signupButton} href='/signup'><button className={styles.singin__btn}>{t('header_signup')}</button></Link>
</div>
<div className={styles.loginHeader__services__dropdown}>
<Scroll offset={-100} to='services'><button className={styles['dropdown__btn']+' '+styles['dropdown__services']}>{t('header_services')}<ExpandMoreIcon className={styles.services__expand}/></button></Scroll>
<div className={styles['dropdown__content']+' '+styles['dropdown__services__content']}>
<Link className={styles.loginHeader__menuItem} href='/admission'>{t('services_addmissionOffers')}</Link>
{/* <Link className='loginHeader__menuItem' to='/application-form'>{t('services_forms')}</Link> */}
<Link className={styles.loginHeader__menuItem} href='/premuim-support'>{t('services_premium')}</Link>
<Link className={styles.loginHeader__menuItem} href='/visa-assist'>{t('services_visaAssist')}</Link>
</div>
</div>
{/* start of lang box */}
<Select
className={styles.loginHeader__select}
labelId='select-demo'
id='language-select'
disableUnderline
variant='standard'
IconComponent={LanguageIcon}
>
{languages.map(({code, name, country_code}) =>
<MenuItem
key={country_code}
>
<button
onClick={() => i18next.changeLanguage(code)}
className='loginHeader__lang__btn'
>
{name}
</button>
</MenuItem>
)}
</Select>
{/* end of lang box */}
<div className={styles['loginHeader__services__dropdown']+' '+styles['loggedin__icon__bx']}>
<button className={styles.dropdown__btn}><SortIcon className={styles['loginHeader__sortIcon']+' '+styles['logedin__sortIcon']}/></button>
<div className={styles['dropdown__content']+' '+styles['logged__sortIcon__dropdown']}>
<Link className={styles.loginHeader__menuItem} href='/premuim-support'>{t('header_dropdown_prem')}</Link>
<Link className={styles.loginHeader__menuItem} href='/admission'>{t('header_dropdown_admission')}</Link>
<Link className={styles.loginHeader__menuItem} href='/visa-assist'>{t('header_dropdown_visaAssist')}</Link>
<Link className={styles.loginHeader__menuItem} href='/request-service'>{t('header_dropdown_requestService')}</Link>
<Link className={styles.loginHeader__menuItem} href='/contact'>{t('header_dropdown_contact')}</Link>
<Link className={styles.loginHeader__menuItem} href='/guid'>{t('header_dropdown_guide')}</Link>
<button onClick={logout} className={styles.logout__btn}>{t('header_logout')}</button>
</div>
</div>
</div>
</div>
</Fragment>
);
return (
<div className={styles.loginHeader}>
<div className={styles.loginHeader__left}>
<Link href='/'><Image className={styles.logo} src={Logo} alt='logo'/></Link>
</div>
{isAuthenticated ? authLinks() : guestLinks()}
<Alert/>
</div>
)
};
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps, { logout }) (LoginHeader);
i18n.js :
const path = require('path');
module.exports = {
i18n: {
locales: ['ar', 'en', 'fr'],
defaultLocale: 'en',
localeDetection: false,
localePath: path.resolve('./public/locales'),
},
};
next.config.js ;
const { i18n } = require('./i18n');
const nextConfig = {
reactStrictMode: true,
i18n,
};
module.exports = nextConfig;
Thanks to Juliomalves who guided me to the solution. So, I changed two parts in my code :
1st :
const router = useRouter();
const [show, setShow] = useState (false);
const currentLanguageCode = router.locale;
const currentLanguage = languages.find(l => l.code === currentLanguageCode);
useEffect (() => {
document.body.dir = currentLanguage.dir || 'ltr'
// document.title = t('app_title')
},[currentLanguage]);
2nd :
<div className={styles.lang__container}>
{languages.map(({code, name, country_code}) =>
<MenuItem
className={styles.loginHeader__select__menu}
key={country_code}
>
<Link className={styles.loginHeader__lang__btn} href={router.asPath} locale={code}>
<a>{name}</a>
</Link>
</MenuItem>
)}
</div>