#I need help with Payload CMS V3 with localized slugs in DB and next-intl with routing.js

9 messages · Page 1 of 1 (latest)

light tendon
#

Hello,

Without out Paylaod CMS V3 I am able to get next-intl to work with Next.js the way I want with localized slugs.

Example: English: en/about French: fr/a-propos

Then if the user goes into the URL address bar and changes the prefix, user will go to the equivalent localized page and url.

Example: fr/about goes to fr/a-propos

Same if i hard code the path using English slug in the next-intl’s Link component.

Example:

<Link href=”/about”’>Link here</Link>

In the front end if user has chosen French and hover over that link it would say fr/a-propos.

This logic is handled with next-intl routing.js file’s pathname’s object

Example:

pathnames: {
'/': '/',

'/about': {
  en: '/about',
  fr: '/a-propos'
},

}

Now my main issue with the Payload CMS integration is that next-intl’s routing.js does not work properly if i have dynamic slugs that come from the DB.

In routing.js If i use

pathnames: {
'/': '/',

'/[slug]': {
  en: '/[slug]',
  fr: '/[slug]',
},

'/about': {
  en: '/about',
  fr: '/a-propos',
},

}

And then go to the page with this path: fr/a-propos
I get 404 error and also my language switcher stops working.

next-intl official docs does mention that the routing.js file is used with CMSs (https://next-intl.dev/docs/routing/configuration). In my case they don’t work.

Anyone know how to deal with this in a clean manner?
There are cases where I want to code in the URLs in the frontend source code.

oblique forgeBOT
#
New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

Community-Help:

serene pasture
#

If you look at the docs, they never show /[slug], only

    // Dynamic params are supported via square brackets
    '/news/[articleSlug]': {
      de: '/neuigkeiten/[articleSlug]'
    },

its for translating the static parts of the path which in next are as folders.

light tendon
serene pasture
#

do you have a slug in payload as "about" and expect next-intl to translate it to "a-propos", or is it /app/about/page.tsx? If its slug in payload, use localized slug. To reiterate, next-intl translates the static next paths, not dynamic ones.

light tendon
#

@serene pasture My code base is based on Payload Website template. The about slug is from Payload. Its dynamic. /app/(frontend)/[locale]/[slug]

#

So I dont use routing.js in this case? So then do i use the next-intl messages .json files to translate the slugs?

light tendon
#

For my language swithcer to work '/[slug]': { en: '/[slug]', fr: '/[slug]', }, needs to be there

light tendon
#

I got coded dynamic paths to work by translating them by next-intl messages .json files. I would have to do that instead of defining them in the routing.js file.

So now if i want to put in dynamic links in my code it would look something like this:

 <Link href={`/${tSlugs("about")}`}>
              Content here
  </Link>```