Translations failing when page is idle for couple of hours

[PreethiVS21]

🐛 Bug Report

in next-i18next version 13.2.2, When translations are rendered using getServerSideProps (next 13.5-pages router) , translations doesn't happen after couple of hours. I can only see key names .

To Reproduce

next-i18next.config.js

const path = require('path');
module.exports = {
  debug: false,
  i18n: {
    defaultLocale: "en",
    locales: ["en", "es"],
  },
  localePath:
    typeof window === 'undefined'
      ? path.resolve('./public/locales')
      : '/locales'
};

index.tsx

export const getServerSideProps: GetServerSideProps<Props> = async ({
  locale,
})=>{

  return {
    props: {
      ...(await serverSideTranslations(locale ?? 'en', [
        'common',
        'randomns'
      ]))
    }
  };
}

Expected behavior

Translations shouldn't fail intermittently

Your Environment

"i18next": "^22.4.13",
"next": "^13.5.6",(pages router)
"next-i18next": "^13.2.2",

[adrai]

Hearing this for the first time...
Maybe a problem of your deployment environment?
Or is this reproducible also locally?
Please provide more information.

[PreethiVS21]

Yes, I can reproduce it locally. Similar comment was addressed here. Can you confirm if this is needed whenever we need to get translations from getServerSideProps
vercel/next.js#46730 (comment)

[adrai]

seems the way Next.js handles this... yes

[Sarawut-keng]

@PreethiVS21 Have you figured out how to fix it? I have also encountered this issue.
I have utilized Page Router, and below are the versions of the packages I am currently using:

"i18next": "^23.8.2",
"next-i18next": "^15.2.0",
"next": "^13.5.6"

[jgregory-apogee]

I've found I can reproduce this locally fairly easily. In our case, we are using a custom Docker image. Simply rebuilding the image and redeploying it is enough to break the translations.

Steps:

1. Deploy the app in prod mode and open any page.
2. Rebuild / redeploy the image.
3. Soft-navigate from the already-opened page to another page. Translations will be broken.

I can see that Next is fetching a translations file on every page transition. For instance, every time I navigate to Page A, it will fetch /_next/data/tfbRnBfT3Y6OXf7Afbrm1/en/PageA/6632778e658b8005459f8503.json, and every time I go to Page B, it will fetch /_next/data/tfbRnBfT3Y6OXf7Afbrm1/en/PageB/99125246-21fc-4742-876c-e7d3b9a52bcc.json. But after a redeploy, those two URLs return an empty translation list: {}. Presumably this is because the Next BUILD_ID has changed. If I do a full reload, the pages fetch slightly different URLs, like: /_next/data/eCtPEywIx-3IoSgG-JHVF/en/PageA/6632778e658b8005459f8503.json. (Note that the old BUILD_ID tfbRnBfT3Y6OXf7Afbrm1 has been replaced with eCtPEywIx-3IoSgG-JHVF).

Anyways, it seems I need a way to detect that there's a new BUILD_ID in play and force next to do a full-page-load transition.