Multilingual slug not working with previews

🆘 Support
#1

I have created NextJS app using a CMS with multiple languages support. Here I have added a slug to identify the URL in the preview and live version of the CMS. It works fine when I used the same slug for all different languages but not when using a different slug.

Furthermore, it is not working when I change the language from the frontend side. Because the URL will be created with the previously selected language. To fix this issue I need to get the slug from the CMS based on the selected language, and then get the content from the CMS.

Is there any other way we can accomplish this?

image
image1294×637 59.1 KB

#2

Hello @vishal and welcome to the community!

It looks like you are using a plugin there for this functionality, can you link me the plugin you are using for preview?
Perhaps this plugin would be better for your use-case: Next.js Multilang Sidebar Preview Links - Plugins - DatoCMS

Thank you

#3

Hello @m.finamor and thanks for your response

Fork and install this plugin GitHub - vsimak/datocms-plugin-nextjs-preview-multilang-sidebar: DatoCMS plugin for linking your entities to live and preview versions on your Next.js site.

Thanks.

#4

Hello @vishal,

Taking a quick look at the plugin, it seems that for you to achieve that desired behaviour, you would have to also provide a $locale variable to be coupled with the $slug parameter when filtering for posts using the request inside the plugin.

This way you can couple the $slug with the $locale variable, and create an unique path, even if the slugs are the same, lets say:

pages/$locale/$slug

that would make two unique paths, for the different locales, even if the slugs are the same

#5

Okay. I will try this as well.

Did we create a static page with a dynamic name? For example, I have created a page named landing in Frontend (NextJS app) and added a different slug in CMS as events, landing or something else. In this case preview is not working.

In particular, I was worried about redirecting on frontend using the slugs added to the CMS. I am having difficulty dealing with dynamic slugs as well as multiple languages. Do you have any suggestions for how we can do this better?

#6

@vishal

Sure, here on this starter project: Next.js multilingual blog - DatoCMS

You can see how we handle slugs with different locales to generate unique paths for these posts, you can see on this file specifically the logic we used to do so: nextjs-demo-i18n/[slug].js at master · datocms/nextjs-demo-i18n · GitHub

On line 15 you can see an example on how we generate the paths using dynamic slugs + their locale.