[APPDIR / i18n] How to internationalize slugs?
Answered
Barbary Lion posted this in #help-forum
Barbary LionOP
Hello everyone!
I am struggling with issue about translating slugs.
My stack contains data from external CMS (that provides translated slugs).
Is there any way to provide translated slugs without creating separate folders for each language?
Currently I am basing on folder:
/app/pl/page.tsx
I would like to have something like: /app/[lng]/page.tsx , that would generate PL and ENG versions of page.tsx (based on data from CMS).
I am struggling with issue about translating slugs.
My stack contains data from external CMS (that provides translated slugs).
Is there any way to provide translated slugs without creating separate folders for each language?
Currently I am basing on folder:
/app/pl/page.tsx
I would like to have something like: /app/[lng]/page.tsx , that would generate PL and ENG versions of page.tsx (based on data from CMS).
Answered by Eric Burel
and then the middleware let you map multiple URLs to the valid route
25 Replies
not-milo.tsx
Do you need to internationalise page slugs or provide translated versions of the same page with a locale prefix? Those are two different things
You can localise slugs using middleware rewrites and internationalise your website/app with various approaches
Barbary LionOP
I need to have different slugs with same templates (page.tsx) and different data (per language from CMS)
Example:
Same template, different data:
/pl/katalog -> article in CMS, language PL
/en/catalog -> article in CMS, language EN
Same template, different data:
/pl/asortyment -> article in CMS, language PL
/en/assortment -> article in CMS, language EN
Example:
Same template, different data:
/pl/katalog -> article in CMS, language PL
/en/catalog -> article in CMS, language EN
Same template, different data:
/pl/asortyment -> article in CMS, language PL
/en/assortment -> article in CMS, language EN
not-milo.tsx
Do you have i18n already built inside the app or are you just starting to implement it?
Barbary LionOP
Not yet
not-milo.tsx
That's great cause you have a blank slate to work with.
The best i18n solution I can recommend for the app router right now is the "native" one shown in this official example: https://github.com/vercel/next.js/tree/canary/examples%2Fapp-dir-i18n-routing
Once you have this set up you can then add logic inside your middleware to match all your page pathnames and rewrite requests to them in order to internationalise the slugs.
The best i18n solution I can recommend for the app router right now is the "native" one shown in this official example: https://github.com/vercel/next.js/tree/canary/examples%2Fapp-dir-i18n-routing
Once you have this set up you can then add logic inside your middleware to match all your page pathnames and rewrite requests to them in order to internationalise the slugs.
Let me know how it goes and if you encounter any issues along the way ✌ðŸ»
Barbary LionOP
Starting then, thanks for the github URL.
Topic should stay open for further questions, If everything will pass well, then I'll close it!
Topic should stay open for further questions, If everything will pass well, then I'll close it!
not-milo.tsx
Sounds good to me
Barbary LionOP
What about further urls?
Example:
/pl/katalog/artykul
/en/catalog/article
and further ... /pl/katalog/artykul/wydarzenia
/pl/catalog/article/events
Example:
/pl/katalog/artykul
/en/catalog/article
and further ... /pl/katalog/artykul/wydarzenia
/pl/catalog/article/events
not-milo.tsx
I haven't tried yet. I'll stitch up a test repo as soon as I can and I'll let you know.
For now I think you can get the url and generate an array containing all the different segments and then match each one with the corresponding translation from a tree like data structure
For now I think you can get the url and generate an array containing all the different segments and then match each one with the corresponding translation from a tree like data structure
Eric Burel
You'd want to store the slugs in a database accessible from a middleware
so typically an Upstash hosted Redis
and do an URL rewrite from there
the idea is that you need a single valid route in your Next.js app, based on your folder structure
Eric Burel
and then the middleware let you map multiple URLs to the valid route
Answer
Eric Burel
so for instance user type "pl-Pl/kurzwa"
but this is just a slug, it should point to a specific page whose id match "kurzwa"
so in a middleware, you check the URL, see "kurzwa", look in your Redis store and see that it matches the article id 42 => rewrite the URL to that
and if you see "pl-PL/santé", you can instead redirect to "pl-PL/kurzwa"
a URL redirect is visible, a URL rewrite is not
not-milo.tsx
Ooooh, that's way smarter
Eric Burel
to make it easier you can perhaps generate a file at build-time rather than using a Redis
it depends whether you know the URLs or not
yeah it's actually quite common, before middleware people would do that in their proxy server or gateway