App Router and next-intl Incremental Adoption

[SalmenBejaoui]

Hi all, My project currently uses Pages Router and next-i18next for i18n. I'm planning to replace next-i18next with next-intl, but only for the App router part. Do you think it's possible?

[amannn]

Sounds doable, yes! I think it really depends on if you have components that are used both in the App as well as the Pages Router.

If your components are exclusive to a given router, then you can set up next-intl for the App Router and use it where relevant in components while continuing to use next-i18next in the Pages Router part.

If you have components that are used with both routers, then you need to set up NextIntlClientProvider for the Pages Router and use APIs from next-intl in components that are used in both environments. What you can do however, is adding NextIntlClientProvider and relevant messages only to parts of pages where components are shared between routers.

A nice benefit you might be able to leverage is that components that use next-intl and no interactive features from React like useState can be rendered as Server Components when rendered in the App Router, even if they ran as Client Components in the Pages Router previously.

[SalmenBejaoui]

@amannn nice! thanks for the explanation.
I had internalization issues having pages and app folder and i18n config in next.config.js. After some research, I found out that I need to remove i18n and manage it by next-intl middleware. We have a lot of redirects, rewrites, and locale domains for domain routing.
I will give this example a try https://github.com/amannn/next-intl/tree/main/examples/example-app-router-migration

[patrikzita]

@SLMNBJ Hi man, would you provide solution how to setup next-i18next for Pages Router and next-intl for App Router pages at the same time? I struggle with that. I understand there´s neccessity of using some rewrites, but the basic demo would help me a lot 🙏 Thank you in advance.

[SalmenBejaoui]

@patrikzita After doing some POCs, and due to the complexity we had to manage, we decided to focus on rewriting the full app using App Router. In our case, before starting the incremental adoption, we had first to move our i18n configuration to use middleware. This requires a big effort.

Check what Rob Lee said vercel/next.js#57704 (comment)

[patrikzita]

Thank you for your answer. I also want to rewrite the full app using App Router. Hovewer, we're in production with thousands user per day and rewrite it is one big PR. (maybe I just cannot image how to split it in smalls). Do you have any example how to adopt i18n configuration in middleware?