NextJs Prismic routes and Slugs translation

Developing with Prismic
1

Hello,

We have a multilingual site. 3 languages to be precise: FR, EN, NL
We already have locale management with src/app/[locale]
but we have a problem with slugs. Our pages are www.domaine.com/news/:uid. For proper SEO, the slug should be translated into French. So as to have www.domaine.com/actu/:uid. We haven't found a clean way to do this. We could put conditions on lang in prismicio.ts and make directories src/app/[locale]/news and src/app/[locale]/actu, but that's redundant, risks duplicate code and is a security risk.
Do you have a cleaner, more standard method?
We've also tried "next-translate-routes", but it's not compatible with NextJS 14, on which our project is based.

const routes: prismic.ClientConfig["routes"] = [
  {
    type: "homepage",
    path: "/",
  },
  {
    type: "contactpage",
    path: "/contact",
  },
  {
    type: "newspage",
    path: "/news/:uid",
  },
  {
    type: "newslistpage",
    path: "/news",
  },
];
3

Hey @micha,

This should be possible with the route resolver:

You can do something like this:

  {
    type: "newspage",
    lang: "en-us",
    path: "/news/:uid",
  },
  {
    type: "newspage",
    lang: "fr-fr",
    path: "/actu/:uid",
  }

Does that work for you?

Sam

4

Hello Sam,

Yes, that will probably work, but we'll be duplicating the programming of the news directory twice. Having the code in three places isn't the best solution. If we fix the code in one place, we mustn't forget to fix it in the other two. It's prone to errors and not very optimized.

5

Hey @micha,

Have you looked at our i18n documentation?

I don't think you'll need to duplicate your programming. Take a look at the doc and let me know if you still have any questions.

Sam

6

Hello Sam,

Indeed, with a path: '/lang?/:uid' mechanism, there's no problem. All pages are at the root with their own UID. You could even consider the news list page as a page with its own UID.
We'd then have pages like:

www.site.com/en/news
www.site.com/en/news-1
www.site.com/fr/actus
www.site.com/fr/actus-1

This is probably where we'll be heading if there are no other solutions.

What I would have liked is the possibility of adding a translatable slug. Like in Symfony for example.

www.site.com/en/news
www.site.com/en/news/news-1
www.site.com/fr/actus
www.site.com/fr/actus/actu-1
7

Hey @micha,

If I understand correctly, this will accomplish what you want:

  {
    type: "newspage",
    lang: "en-us",
    path: "/news/:uid",
  },
  {
    type: "newspage",
    lang: "fr-fr",
    path: "/actu/:uid",
  }

I don't think you need to duplicate any programming here. You should still be fine with one file, /:lang/:uid. I think I'm misunderstanding, though. What's the blocker?

Sam

9

If I use

  {
    type: "newspage",
    lang: "en-us",
    path: "/news/:uid",
  },
  {
    type: "newspage",
    lang: "fr-fr",
    path: "/actu/:uid",
  }

I will have a 'news' directory and an 'actu' directory with the same files. That's what I mean by duplicate programming files. And I don't think we can create directory aliases in Versel.

11

Hey Micha,

I will have a 'news' directory and an 'actu' directory with the same files

That's not necessarily the case. You could have a file like app/[section]/[uid].js and dynamically read the section segment as news or actu to impute the language. You might create an object like this:

const sectionLangs = {
  news: "en-us",
  actu: "fr-fr"
}

Then in your query you would do something like this:

prismic.getByUID("page", params.uid,
  {
    lang: sectionLangs[params.section]
  }
)

Let me know if that makes sense :slight_smile:

13

Forgive me Sam but I come from the PhP world :)
Even if the developer in charge is qualified React, NextJS.
We've tried more but nothing is conclusive. I can't understand why there isn't a standard method for something as simple as managing url rewriting translation. It's imperative for any SEO optimization. Symfony, Laravel, WordPress, Prestashop, CRAFTcms, ... they all integrate the ability to have translated slugs.

www.site.com/en/news/news-1
and
www.site.com/fr/actus/actu-1

should have a simple prismic solution. Maybe define the slug method in the file.
But right now we're going in circles. And I'm a bit disappointed. Yes, it's simple if there's only one type of page and you only use UID. But in a real site, there are sections and categories.
I can't find any documentation with a real methodology to follow. A real best practice. It's a shame for a product of your quality.
Besides, I don't feel like I'm asking for the moon. After all, I'm not the only project in need of a translated section. I don't understand why there isn't a validated and usable beste pratice.

15

Hey @micha,

What you're describing is possible and straightforward with Prismic as far as I understand, so I think we can figure this out.

Could you describe the file structure of your project and the routing structure of your website for me?

Sam

16

Hello Sam,

Did you see my private message?

Kr

Micha

17

Hi Micha,

Thanks for sharing this detail. It seems like the problem is that the news/nieuws/actu segment is hard-coded in your application. If the name of the folder is news, then the URL segment can only be news/.... If you change the folder name to [news], then you can handle URLs in any language.

Let me know if you have any other questions!

Sam

18

I still can't figure out how to use [news]. Especially since there's also the same strategy for events, jobs, recipes and content slugs. We need to create constants and conditions. Your proposal remains unclear to me. Could you elaborate on your solution? This will probably help others
Thank you very much.

19

Hey @micha,

Here's an example implementation:

sam-240520-next-01.zip (96.0 KB)

You can see that the [section] segment does nothing expect create a placeholder for the URL. In theory, you could go to /fr-fr/dog/autre or /fr-fr/ostrich/autre. If you wanted, you could create an app/[lang]/[segment]/layout.ts file where you enforce some URL validation rules, to ensure that the URL segment matches your structure.

Sam

21

Just to let you know that we have implemented the URL rewriting for the sections based on your advice. It's perfect.

Thank you. Your Zip file was a great help.

1 Like
22

Amazing! I'm glad to hear it! Thanks @micha.

23

Hi, first of all, this post is great and it should really be documented somewhere.

I still have some followup questions.

I have the following urls:

/news/ <- contains a paginated list of the news articles
/news/2/ <- page 2 of the list of news articles
/news/3/ <- page 3 of the list of news articles

/news/article-1/ <- News article 1 
/news/article-2/ <- News article 2

At the same time I have also the following:

/team/ <- contains a paginated list of all the team members
/team/john-doe/ <- profile page of the team member "John Doe"
/team/jane-doe/ <- profile page of the team member "Jane Doe"

If my folder structure is something like this:

/app/
    [lang]
        page.tsx
        [section]
            page.tsx
            [uid]
                page.tsx

How can I make a distinction if I want to load the "newsPage" custom type, "newsItem" custom type, "teamPage" or "teamMember"?

24

Hey @tudor2004 To manage different page types, use [section]/[uid] for routing. Then you'd need to check the section parameter to identify if it's a "newsPage", "newsItem", "teamPage", or "teamMember".

For paginated lists, you could use an additional parameter to handle pagination, such as /news/page/2 for the second page of news articles.

26

Hi @Pau, thanks for your reply!

you'd need to check the section parameter to identify if it's a "newsPage", "newsItem", "teamPage", or "teamMember".

But where do I do this check? Inside the [lang]/[section]/[uid]/page.tsx file? And if so, depending on the identified page, do I redirect him somewhere or do I just render a different component?

27

You need to create a Route Resolver so it creates the correct path depending on the type of page you're using:

In all cases, the route resolver is an array of route objects. Each route object can include the following properties:

* A `path` property to describe the URL
* Conditions like `lang` and `type` to describe what documents to apply to
* A `resolvers` property to describe content relationships that you want to use in the URL