Search code examples
next.jsmultilingualslugnext-i18nextnext.js14

Translation of entire URLs using the app router

Next.js 14 using the new app router covers dynamic routes...

en/[slug]

...and routes for multiple languages:

[lang]/contact-us

One thing that is not covered anywhere is a combination of both. I want to have one route per language with an individual slug:

en/contact-us
de/kontakt
fr/contactez-nous

I would like to avoid having to create a page (page.tsx) for each language, but instead route everything via the same page if possible:

[en/en/fr]/[contact-us|kontakt|contactez-nous]

The result should be:

en/contact-us
de/kontakt
fr/contactez-nous

All of this should use a shared page so that the logic does not have to be implemented separately for each language.

Is this possible? Is there another approach without having to create three separate page.tsx files with lots of redundancy?

Solution

  • I figured it out by myself. I am using next-intl from now on.