using i18n in app router and pages router at the same time

[islamhanafi94]

Hey

I have an app that runs on the pages router for now, and we would like to migrate to the App router inclemently.

// next.config.js

...
i18n : {
    locales: ['de-de', 'en-de'],
    defaultLocale: 'de-de',
}

Now I want to add new page (APP router) as a new home page with a path = /en-de

I tried the documentation approach of using a middleware but it was overriding the i18n part config in next.config.js

any ideas how to achieve that?

[rnnyrk]

Found this issue after searching and trying endless times. Think it's easy to achieve the wanted behaviour. See: #53724

[m-sanders]

You need to first move away from nextConfig.i18n to an alternative implementation like the mixdleware approach as documented in the migration guide. You can then incrementally adopt app router.

Be warned that it does result in extra round trips to the middleware to rewrite paths. There is a “good to know” that hints at it here:

https://nextjs.org/docs/pages/api-reference/components/link#middleware

Good to know: If you're using Dynamic Routes, you'll need to adapt your as and href props. For example, if you have a Dynamic Route like /dashboard/authed/[user] that you want to present differently via middleware, you would write: <Link href={{ pathname: '/dashboard/authed/[user]', query: { user: username } }} as="/dashboard/[user]">Profile</Link>.