Changing the language the label does not update

[matteo-gobbo]

🐛 Bug Report

Hi, when I change la language using link at the first render the label doesn't update.

To Reproduce

A codesandbox example
To reproduce:

• Go to /demo
• Click on EN
• You will see at first render the old label

Expected behavior

When changing the path I expect that the label is updated too.

Your Environment

• runtime: node v18.17.0
• i18next: ^23.7.16
• next-i18next: ^15.0.0
• react-i18next: ^13.5.0
• os: Mac

[adrai]

That's probably because you set the locale to 'it' here:

export const getStaticProps: GetStaticProps = async () => {
    const locale = "it";

    return {
        props: {
            locale,
            ...(await serverSideTranslations(locale, ["common"])),
        },
    };
};

do this instead:

export const getStaticProps: GetStaticProps<Props> = async ({
  locale,
}) => ({
  props: {
    locale,
    ...(await serverSideTranslations(locale ?? 'it', [
      'common'
    ])),
  },
})

Why do you have an "en" folder?
Please compare with this example: https://github.com/i18next/next-i18next/tree/master/examples/simple
Or if you use ssg with this one: https://github.com/i18next/next-i18next/tree/master/examples/ssg

[matteo-gobbo]

Thank you @adrai for your reply.

Sadly this is only a replica of a bigger project that is structured this way with all italian pages on one side and all english pages under the folder en. So this is way you see locale hardcoded to "it" or "en".

[alfredosalzillo]

I'm experiencing the same problem, using the 14.* version solve the issue.

[matteo-gobbo]

Yes @alfredosalzillo we're actually using the v14 and it works fine. While trying to upgrade to v15 I found that problem.

[rommmy]

Hi there,

Currently experiencing the same issue while trying to upgrade from v14 to v15.

My app only uses serverSideTranslations. The behaviour is the same as the codesandbox linked by @matteo-gobbo: Loading the localized homepage, switching language (through a link pointing to the localized homepage), and then the translations don't get updated until I manually refresh the page.

After some debugging, I found out that if I replace the use of useLayoutEffect with a useEffect, everything works fine. It probably lets the door open to some other kind of problems (I haven't experienced any but haven't tested much either), but at least using useEffect I can switch the language and see the correct translations applied without having to refresh the page.

Based on i18next docs, the changeLanguage call returns a promise. Is it really safe to call this inside a useLayoutEffect ? I think there might be a risk of the DOM getting painted while the changeLanguage call hasn't finished, which could explain why the old translations are still used.

Note: I'm only experiencing this behaviour running the app through next start. If the app starts with next dev then I don't have the problem. Also, the locale isn't hardcoded in getStaticProps in my case @adrai

Any thoughts?