Why my next-i18next isnot working and even though translated content is written in json file instantly.

[joorraa]

🐛 Bug Report

As said in the title, the app doesn't get the latest content from json file. I have translations in database. For a page /product/3, I do serverside props, but it doesn't get latest json file.

To Reproduce

or at least steps to reproduce the behavior:

serverside props in the page:

export async function getServerSideProps({ params, locale }) {
    const res = await axios.get(`/api/products/${params.id}`);
    return {
      props: {
        ...(await serverSideTranslations(locale, ['singleproduct'])),
      },
    };
}

that api file:

the api is like this:
import db from '../../../db';
import fs from 'fs';
import axios from 'axios';

export default async function handler(req, res) {
    const { method } = req;

    if(method === 'GET') {
        try {
            var enResults = await axios.get('mydatabase link');
            var deResults = await axios.get('my database link');

            const singleFileDE = './public/locales/de/singleproduct.json';
            const singleFileEN = './public/locales/en/singleproduct';
            const singleFileDefault = './public/locales/default/singleproduct.json';


            const singleproductDataDE  = JSON.parse(fs.readFileSync(singleFileDE, 'utf8'));
            const singleproductDataEN  = JSON.parse(fs.readFileSync(singleFileEN, 'utf8'));
            const singleproductDataDefault  = JSON.parse(fs.readFileSync(singleFileDefault, 'utf8'));

            var deDestinations = deResults.data.message;
            var enDestinations = enResults.data.message;
           
            let updatedData = {
                    ...homeDataAR,
                    singleproduct: deDestinations
            };...

            fs.writeFileSync(homeFileDE, JSON.stringify(updatedData, null, 2));

            return res.json(deDestinations);
        } catch(error) {
            console.log(error);
        }
    }
}

next-i18next.config.js:

const path = require("path");

module.exports = {
  i18n: {
    locales: ["default", "en", "ar"],
    defaultLocale: "default",
    localeDetection: false,
  },
};

Expected behavior

I want the latest json file loaded as soon as the api is called and json in changed, or when user goes to the page

// Paste the expected results here

Your Environment

• runtime version: node v16.14.0
• i18next version: ^22.4.9
• os: Windows
• any other relevant information

[adrai]

Sorry, this is still not a minimal reproducible example...
Please provide a github repository I can clone and run.

[joorraa]

@adrai sorry here is the minimal reproducible example: https://drive.google.com/drive/folders/1f_wnaljymN24BgajcR50LK10tuBMu2w8?usp=sharing

Sorry it couldn't be repo, i am authenticated on another account is pc and very tired to change it to this account

[adrai]

You are using getInitialProps, but that's not supported.

I've personally never used getInitialProps in next.js. If possible remove that...
Nevertheless, it may be adding an empty pageProps option already helps:

or try v13.2.2

[joorraa]

@adrai either way it doesn't work :( Did it work on your side? Is my implementation correct?

[adrai]

Yes, with 13.2.2 I don't get an error anymore.

[joorraa]

@adrai mate its not about the error, my main problem was not fetching latest json while the page refreshes

[adrai]

That's because of 2 things:

1. set reloadOnPrerender to true, like described in the readme: https://github.com/i18next/next-i18next/#reloading-resources-in-development

2. do. not overwrite the json files, or at least check if the json file really changes (if you really need to do so):

[joorraa]

@adrai thanks. but if I don't overide how will the json change and latest data is fetched?

[adrai]

I don't know your use case, but normally the translation resources are not changed programmatically... but if your use case needs that, ok.
The important part is the reloadOnPrerender.

[joorraa]

@adrai mate thats what I am trying to tell. I am complete beginner to this. whats your recommendation for my use case: We have translations in the database. What I want is when user goes to /destinations, I want latest translation served to them. I understand other static contents doesn't change much(which we won't fetch and use statically) but for like getting latest destinations/products, I need that.

[adrai]

Alternatively, you can create your custom i18next backend (https://www.i18next.com/misc/creating-own-plugins#backend) and use it similar to this: https://github.com/i18next/i18next-http-backend/tree/master/example/next

[joorraa]

@adrai thanks! I did came to your example previously. No time to create custom one. Is client side the only option for my case?

[adrai]

no, the client side, is just an example.
You can use the custom backend also on server side, just remove the typeof window check in the config

[joorraa]

@adrai thank you very much! It worked. last question, how much effect will https://github.com/i18next/i18next-http-backend/tree/master/example/next have on SEO & performance, since we will have useEffect in each pages. Any suggestion to minimize the effects?

[adrai]

As long as you use serverSideTranslations SEO should work... performance depends on your backend

[joorraa]

@adrai Thanks boss!

[joorraa]

@adrai mate is it possible to serve the translation from CDN itself?

[adrai]

yes, you can serve the translations directly from the cdn (just define the used backends in the config accordingly), but this will generate a lot of requests on server and on client side...

[joorraa]

@adrai ahh man what to do then. With my previous process it seem its lots of trouble in production, with multi-instance, with writing in json files.

[adrai]

Sorry, I can't code everything for you...
Basically if you want to always consume everything from a CDN, you need to do something similar to Possibility 2: https://github.com/locize/next-i18next-locize#possibility-2-config-for-locize-live-download-usage

[alamin-nifty]

Same problem here but my backend is inside next.js .