Unable to use gtranslate.io translation

[NabeelAhmed23]

Hi, I have a site that I built with pages directory. I am also using gtranslate.io to translate the page into different languages and each language has its own subdomain. For example, example.es, example.pt. In pages directory gtranslate used the pageProps json to translate the json and i used that json to populate the text in the components. For example :

function getServersideProps() { return { pageText: { hello: "Hello World", gt_translate_key: ["hello"] } } }

In pages directory, I get the data like this, so its easier to get the json and translate the properties.

I have now moved to app router and in app router there is no json that can be translated. Now all the data is this form:

Because of this the gtranslate team cannot get the json to translate. Is there any way to resolve this issue?

The page translates on initial load and is translated from the html and then nextjs hydrates the page and overrides the translation and the page goes back to english. I thought the server component would translate as there will be no hydration.