[Docs]: Example Integration of next-intl with Common CMS (e.g., Strapi)

[robsannaa]

Link to page

No response

Describe the problem

Hello,

It would be fantastic to have an example showing how to use next-intl with popular CMS platforms like Strapi. Specifically, an example that demonstrates how to set up dynamic routes like /[lng]/[product-name], and fetch both server-side and client-side static content, such as header and footer links, would be incredibly helpful.

What I would suggest to cover:

• Dynamic Routes: setting up and handling dynamic routes, such as /[lng]/[product-name].

  Including: - Configuring next-intl for dynamic locales. - Setting up Next.js dynamic routes to handle language parameters. - Fetching and rendering content based on the locale and dynamic route parameters.

• Fetching static content: Fetching content for static elements such as header, footer, buttons, tooltips and so on

Including: - Server-Side Fetching: How to fetch localized static content like header and footer links from a CMS like Strapi during server-side rendering (SSR). - Client-Side Fetching: How to dynamically fetch and update localized content on the client-side for a smooth user experience when switching languages or navigating.

[amannn]

I absolutely agree, would be great to add some docs for this! We can use this issue for the time being to collect content ideas.

I think one of the major pieces relevant to this is retrieving a locale from next-intl and passing it to calls to your CMS. I briefly touch on this topic in an article I wrote in this section: Internationalizing backend data.

Apart from that, if you're using a CMS to manage localized slugs of pages, you might want to consider using a catch-all-based routing system like app/[locale]/[[...slug]] (see the note in the localized pathnames docs).

[leon2811-be]

Also trying to get SSR to work with localized slugs from Strapi... can't get it to work withoud sketchy workarounds and a delay during language switch.

[paulmwatson]

Any progress on this? Looked at Decap CMS and next-inl but phew, complex. First hurdle is going from YML to JSON. Now looking at Hygraph CMS and next-intl.

[tshmieldev]

Any updates?

[ayhid]

Hi everyone, I've actually developed a solution for fetching localized pages and content from Strapi with next-intl that might help address some of the issues mentioned here. For those who have been asking for updates or mentioning specific challenges (@leon2811-be , @paulmwatson paulmwatson, @tshmieldev, @robsannaa ), I'd be happy to share my approach, but it would help if you could clarify what specific parts you're struggling with:

• Setting up dynamic routes with localized slugs?
• Server-side fetching of localized content?
• Client-side handling of language switching?
• Integrating Strapi's content structure with next-intl's localization system?
• Something else entirely?

My implementation handles both static content (headers, footers, navigation) and dynamic routes (/[lng]/[product-name]), but I want to make sure I'm addressing the most relevant pain points you're experiencing.

Let me know what's most challenging for you, and I can share the appropriate parts of my solution.