Handling i18n in Mixed Routing (App + Page) During Next.js Migration

[sangwaanil]

Summary

We have a Next.js application that was initially developed using the Page Router, with i18next handling translations, and it has been working fine. Now, we are migrating to the App Router.

The issue we’re facing is that the application only works with the default locale set in next.config.js (which is en-US) but ignores all other locales. Based on the Next.js documentation, the only working solution I found is to create a [locale] or [lang] directory inside the app directory and use middleware for redirection.

While this approach works, we want to achieve the same behavior as in the Page Router:

The default locale (en-US) should work without being present in the URL, i.e., localhost:3000 should load the en-US content.
Other locales should work with their respective locale prefixes, e.g., localhost:3000/en-IN, localhost:3000/fr-FR, etc.
Additionally, since we are migrating our app gradually, we are using mixed routing—meaning we have both the pages and app directories in our project as we migrate pages one by one to the App Router.

I haven’t found a way to achieve this behavior in the App Router. Has anyone encountered this issue or found a solution?

Additional information

No response

Example

No response