Next.js - Navigation between pages in the pages router loses translations.

[royporter7]

Description

I've cloned the "App router migration" example, added two basic test pages in the pages router with translations strings and links using the the link component wrapper exported from the next-intl navigation file, and deployed to a serverless environment representative of the hosting environment used at the company I work via default SST configurations for a Next.js project.

When running the application locally in development mode, there are no issues and behaviour is expected. When building the application for production and running the built application locally, the behaviour is as expected.

However, only on the deployed version of the application when transitioning via a link between two pages from the page router, the translations are lost, and the translations keys show on the page which is transitioned to. This does not happen when transitioning between two app router pages.

Please check the reproduction URL to observe the behavior.

Verifications

• [X] I've verified that the problem I'm experiencing isn't covered in the docs.
• [X] I've searched for similar, existing issues on GitHub and Stack Overflow.
• [X] I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://d3gc586bjowmi6.cloudfront.net/en/about

Reproduction description

Steps to reproduce:

1. Open reproduction url (linked page is a pages router page)
2. Click on "To test2" link (another pages router page)
3. Observe that all translations on the new pages have become their translation keys, and the browser console reports "MISSING_MESSAGE".
4. Also observe that all translations are correctly in the pageProps of the page contents + prefetch of the test2 page.
5. Refresh the page that is incorrectly showing the translation keys.
6. Observe that the refreshed page shows the translation strings.

Expected behaviour

Clicking on links to go between pages should show the newly navigated page with it's translations, and not it's translation keys and browser console should not throw errors.

[amannn]

Really haven't seen that behavior before! It's unfortunately a bit hard to say what's going wrong here, esp. if everything is working correctly locally.

From the currently available information, this sounds more like a deployment issue. Maybe you can try to diagnose and diff the requests for subsequent navigations between the deployed version and what you're seeing locally (headers, payload, …)?

[github-actions[bot]]

Thank you for your report!

From the currently available context in this issue, it's unclear wether the erroneous behavior is caused by Next.js, next-intl or a 3rd party library that you're using. Please isolate the issue further to be sure that the issue is caused by next-intl. When in doubt, please search on the Next.js issue tracker or related resources of 3rd party libraries you might be using.

If you're able to isolate the issue to next-intl, please provide a minimal reproduction that ideally doesn't involve any 3rd party libraries or alternatively demonstrates that next-intl is causing the issue.

Thank you for your understanding!

[github-actions[bot]]

This issue has been automatically closed because it is currently not actionable and has become stale. If the problem persists, please create a new issue.