Integration with NextJs, _next/data after build change response object.

[Vin-dellavv]

Greetings,
First timer with tolgee and fairly a neophyte with nextjs.
After integrating I notice a different behavior of the TolgeeProvider between the local version and the build one.
In the local version it manages to correctly fetch the namespace that is administered in the init, in the builtin instead the call is intercepted by next which places it under _next/data but adding "pageProps" as the first level of the response object practically prevents the keys from being correctly fetched.

I need to add some other param to my init config? (doc wasn't very clear about)
// Init plugin
const tolgee = Tolgee()
.use(LanguageDetector())
.use(FormatIcu())
.use(DevTools())
.init({
availableLanguages: ["en", "it", "de"],
defaultLanguage: "en",
apiKey: TOLGEE_API_KEY,
apiUrl: TOLGEE_API_URL,
ns: [TOGLEE_NAMESPACE],
defaultNs: TOGLEE_NAMESPACE,
staticData: {
de: deLocale,
en: enLocale,
it: itLocale
}
});

export const getServerLocales = async (
locale: string | undefined,
ns?: NsFallback
) => {
const namespaces = ["", ...getFallbackArray(ns)];
const result: Record<string, any> = {};

if (locale) {
	for (const namespace of namespaces) {
		if (namespace) {
			result[`${locale}:${namespace}`] = (
				await import(`./i18n/${namespace}/${locale}.json`)
			).default;
		} else {
			result[`${locale}`] = (await import(`./i18n/${locale}.json`)).default;
		}
	}
}

return result;

};

Here a response example on local:
{
"en": {
"COMMON": {
"BUTTONS": {...}
...
}
...
}
}
to this url:
https://privacy.com/v2/projects/64/translations/en?ns=test

and response on build-ed version:
{
"pageProps": {
"en": {
"COMMON": {
"BUTTONS": { ... },
...
}
...
}
}
}
to this url: http://localhost:3000/_next/data/"randomUID"/en.json

[stepan662]

Hey, this seems like some issue with next.js configuration and with passing the data to props, however I'd need to see a whole configuration, I can't pinpont the issue from this partial example.

[Vin-dellavv]

Hi, i've tried meanwhile the integration with /app router https://tolgee.io/blog/how-to-setup-tolgee-with-nextjs-app-router, but without app/page.tsx seems like next can't reach for app/[locale]/page.tsx a returns 404 error

[stepan662]

As I was saying, I think it's an issue with next.js configuration, I can't really debug this for you. If you find an issue with Tolgee, let me know.

[Vin-dellavv]

Sure, I'll study the integration a bit and see why it doesn't work for me.
could you check in the guide (link) if it is correct that tolgeeSSR is commented out? in working repo isn't commented out

[Vin-dellavv]

I've made a fork form doc example repo but still i don't get why on run dev apiurl and key fetch the correct data and translate "COMMON.BUTTONS.CLOSE" (i've put a log of tolgeeSSR.getAllRecords() in client.ts but don't shows it)

and why after run build/start it no longer does/fetch correctly... (but ns now is shown in log )

[Vin-dellavv]

Hey Stepan, by any chance, have you take a look at the repo? i'll really appreciated.