switch locale would load the translations and I can see the result, but as soon as the page finishes loading it goes back to the default value #2127

crazyyi · 2023-03-17T10:34:36Z

crazyyi
Mar 17, 2023

If there is no default value it would display the key of the translation. Any idea what is going wrong in my code?

<Head>
        <title>{t(`home.title`, `my title`)}</title>
 </Head>

You can see I give the text a default value which is "my title".

In component:

const { t } = useTranslation("home")

In getServersideProps:

const translation = await loadTranslation(
    context.locale!,
    "home"
  )

in i18n.ts:

import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import NextI18nextConfig from "../next-i18next.config"

export const loadTranslation = async (locale: string, ...filenames: string[]) => {
      return {
         ...(await serverSideTranslations(locale, [...filenames], NextI18nextConfig)),
      }
}

In next-i18next.config.js:

const isBrowser = typeof window !== 'undefined'

module.exports = {
  i18n: {
    locales: [
      "en",
      "ko",
      "zh-Hant",
      "zh",
      "es",
      "fr",
      "ms",
      "vi",
      "ja",
      "pseudo",
    ],
    defaultLocale: "en",
  },
  serializeConfig: false,
  ns: ["home", "common", "faq", "chooseplan"],
  reloadOnPrerender: process.env.NODE_ENV === "development",
  defaultNS: "common",
  localePath: isBrowser
  ? require('path').resolve('./public/static/locales')
  : require('path').resolve('./src/locales'),
  debug: true
};

Because debug is turned on, I can see this message after I switch locale by appending "ja" like this http://localhost:3000/ja:

i18next::translator: missingKey ja home home.title

and a bunch of other missingKey messages. But the key "home.title" is in ja/home.json. And I can see the changes if I update the value in the key. But that's just for half a second and then it goes back to the default language.
I have no idea why would it give this warning. On the server side the translation is loaded to the pageProps.
Why does it load it on client side and then revert back to the default value?

crazyyi · 2023-03-17T12:42:12Z

crazyyi
Mar 17, 2023
Author

Just figured out I also need to return props in getServerSideProps and getStaticProps in this format:

return {
  props: {
    ...translation
  }
}

Now everything is working both in dev and production.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

switch locale would load the translations and I can see the result, but as soon as the page finishes loading it goes back to the default value #2127

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

switch locale would load the translations and I can see the result, but as soon as the page finishes loading it goes back to the default value #2127

crazyyi Mar 17, 2023

Replies: 1 comment

crazyyi Mar 17, 2023 Author

crazyyi
Mar 17, 2023

crazyyi
Mar 17, 2023
Author