Support for Next 13 App Router & Pages Router

[alvesvin]

What version of this package are you using?
[email protected]

What problem do you want to solve?
Currently, next-translate-plugin webpack loader can only support either Pages Router or App Router based on experimental.appDir configuration in next.config.js. While most of production apps are still migrating from the old Pages Router, we need to support both of those types of routing.

What do you think is the correct solution to this problem?
The solution is to support multiple pages directories and add necessary helpers accordingly, heavily based on the directory pattern. If page is under a valid App Router directory, than it is a new Next 13 page. If page is under a valid Pages Router directory, than it is a legacy page. Other files are skipped.

Are you willing to submit a pull request to implement this change?
Yes!

[alvesvin]

Any thoughts on it @aralroca?

[aralroca]

Yes, is in the plan. Currently, I don't have much time to do it, but I'll try to do it as soon as I have time. BTW; any PR about this will be very welcome

[aralroca]

Thanks for your contribution ❤️

[aralroca]

@alvesvin please try this canary https://github.com/aralroca/next-translate-plugin/releases/tag/2.3.0-canary.1 thanks for your contributions. I isolate this change.

[andre-lergier]

We are currently implementing the new App Router.
Therefore we need to support the app and the pages directory at the same time.

After updating next-translate and next-translate-plugin to version 2.6.1 everything works as expected in the app router.
For routes located in the pages folder we now get a react hydration error:

Error: Text content does not match server-rendered HTML.

Warning: Text content did not match. Server: "namespace:page-overview" Client: "Übersicht"

In the frontend, everything is shown correctly.

Do you have an idea what the problem could be @alvesvin or @aralroca?