0

my changeLanguage function is not working in production. Using the debug functionality of i18n i do not have any warning, more so the language change is detected correctly each time i click on the select menu. i have log locale on the console and it returns undefined Can someone explain to me what i do wrong, please? See below my changeLanguage

 const changeLanguage = (e) => {
    const locale = e.target.value;
     i18n.changeLanguage(locale);
    router.push(router.pathname, router.asPath, { locale });
  };
Leo
  • 481
  • 2
  • 9
  • 20
  • 1
    How is changeLanguage invoked? – adrai Jul 12 '22 at 20:39
  • Hi @adrai yes, changeLanguage is invoked . I managed to fix the undefined matter by lifting up my locale in my layout component then pass it as props to my navbar . However it is still not changing the language. There is one this that i have noticed different from localhost is that the lang tag in the html is not changing in production. :) – Leo Jul 12 '22 at 20:47
  • one more thing i have tried to add the the route /en-us in production it returns error 404 – Leo Jul 12 '22 at 21:15
  • solved here: https://github.com/i18next/next-i18next/issues/1910 – adrai Jul 14 '22 at 09:47

1 Answers1

2

You don't need to have a function to change the locale.

With nextjs you have router(), this fit perfectly to any cases.

Also, you have <Link> with locale property.

1st possible way - change locale with URL. So, you can .map your locales with links and then change it.

<Link href='/test' locale={router.locale} key="your_key">
 <a>test</a>
</Link>

2nd possible way - change with function

router.push("/test", null, {locale: "your_desired_locale_or_variable"})

Your locales are defined in your config file, probably you have en locale and not en-us

illia chill
  • 1,652
  • 7
  • 11