Translatable URLs or slugs (configured in Prismic CMS)

Developing with Prismic
8

I (still) haven't gotten to the translations yet, but I stumbled upon this page which I think I missed before Internationalization with Next.js - Documentation - Prismic

I believe that while I was still very new to Prismic I was under the impression that the UID could not be different between translations, but it appears I was wrong as I just tested it and it works fine. I can't remember if I tried this before, so maybe it has been updated to allow this?

So [lang]/[uid].tsx could definitely work in that case. All you need to do is follow the steps on the page:

  1. Create a pages/[lang]/ directory
  2. Create the required dynamic routes in the directory, like pages/[lang]/[uid].tsx and pages/[lang]/[category]/[uid].tsx and implement getStaticPaths and getStaticProps accordingly.
  3. Add your language switch as explained
  4. Add a link resolver function

So going back to my original ideal scenario:

  1. the person using Prismic could specify their desired slug in the CMS (the last part: example.com/some-english-category/ some-english product . The category name would be specified in a NextJS pages directory or dynamically via getStaticPaths ).
  2. the slugs can be different per language (/my-article vs /mijn-artikel)
  3. the language switch on the static page can link to the translated version of the page (if it is available)
  4. this all works on a static site with a private Prismic repo

Point 1 and 2 can be achieved using the UID and making it different per language, point 3 and 4 can be done by following the examples in the docs I linked.

If you need any additional information about another Prismic document the fetchLinks parameter can be used, but it's not necessary for the translations.

I wanted to edit my original post to not throw off any potential visitors to this page, but it won't let me, so I'm going to mark this reply as the solution and hope people see it. :slightly_smiling_face: