How to Handle Dynamic Slugs with Translated Slugs?

[orhancelik1]

Problem: I am working on a project that involves dynamic slugs (such as cities, product pages, or articles). Your docs included some dynamic slug examples but they are not translated like: author names or id's. But what should i do when i need to translate them also? most use cases for articles page slugs.

[svobik7]

Hi @orhancelik1,

dynamic slugs should be handled either by generateStaticParams if you want to pre-generate pages in build time or using getServerSideProps to handle everything in runtime. Or combination to gain more granular control.

You can check basic example where you can find blogs/[author]/[article]/page.tsx. In that file I am pregenerating dynamic slugs thanks to pageLocale that is injected by next-roots.

Let me know if it helps.

https://github.com/svobik7/next-roots/blob/master/examples/basic/src/routes/blogs/%5Bauthor%5D/%5Barticle%5D/page.tsx

[orhancelik1]

Thank you so much @svobik7 i translated [slug] fields but i faced new issue i have localeSwitcher in my header module i cannot get translated url. I used dynamic get href like this:

const href = router.getHref("/cities/[city]", { locale: "tr", city: "london", }); it gives translated '/cities' path but it does not return me translated 'london' my goal: example.com/tr/sehirler/londra it returns: example.com/tr/sehirler/london

[svobik7]

Hi @orhancelik1, did you update your roots router by running yarn next-roots after cities/[slug] root was created?

[orhancelik1]

yes i did but i should send translated city instead of english one that was my mistake. like this: const href = router.getHref("/cities/[city]", { locale: "tr", city: "londra", }); instead of this: const href = router.getHref("/cities/[city]", { locale: "tr", city: "london", });