When a user selected the preferred language I save it in a cookie NEXT_LOCALE.On the index page / the NEXT_LOCALE cookie knows to redirect the user to the preferred language but if the user comes from an external link like email or newsletter like apple.com/startup it doesn't redirect the user to the preferred language. Is there a way to do this without affecting the SEO?
//next-18nnext.config.js
module.exports = {
i18n: {
defaultLocale: 'en',
locales: ['en', 'fr'],
},
react: { useSuspense: false },
};
===============UPDATE===============
My language switcher and setting the cookie:
const LanguageSwitcher = () => {
const router = useRouter();
const { locale, pathname } = router;
useEffect(() => {
if (locale === 'fr') {
document.cookie = `NEXT_LOCALE=fr`;
}
}, []);
const activeClass = (lang) => (lang === locale) && 'active';
return (
<>
<Link href={ pathname } locale="en">
<LanguageLink className={ activeClass('en') }>
EN
</LanguageLink>
</Link>
<LanguageSeparator>
|
</LanguageSeparator>
<Link href={ pathname } locale="fr">
<LanguageLink className={ activeClass('fr') }>
FR
</LanguageLink>
</Link>
</>
);
};
And in my _app.js
const languageCookie = getCookie('NEXT_LOCALE');
useEffect(() => {
if (languageCookie === 'fr') {
router.push(`${languageCookie}${pathname}`);
}
}, []);
But with this implementation, the page loads for a second on 'en' then redirects to the cookie language
Should I take the cookie in getStaticProps from each page?
Please let me know if I should share more code or any other information.
Thank you!