How Would You Implement Region Routing?

[languid sandal]

Hey everyone! 👋

I'm looking for some advice and insights from those more experienced with routing and region-specific content delivery. Here's the scenario:

The Goal:

When a user visits our main domain (e.g., XY.com), we want to automatically redirect them to a region-specific URL like XY.com/us if they're from the US (or another region, depending on their location).
Furthermore, when they visit a path like XY.com/us/products, they should only see products available in their specific region.
The Challenge:
I'm trying to figure out the best approach to implement this efficiently. I'm particularly interested in hearing about:

Best practices for region detection and redirection.
How to manage content delivery to ensure region-specific data is fetched and displayed.
Any pitfalls or considerations to keep in mind while implementing this.
I'm eager to hear your thoughts and approaches on this. Any suggestions or advice would be greatly appreciated! 😊

Thanks in advance for sharing your expertise!

[dry helm]

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:

• Adding your own Queries and Mutations - Best practices
• Building Your Own Plugin - Best practices
• Building Your Own Plugin - Best practices - Providing an enable / disable option:
• Building Your Own Plugin - Best practices - Include tests in your GitHub CI workflow:
• Building Your Own Plugin - Best practices - Publish your finished plugin to NPM:

[verbal valve]

I don't think this is a payload question and more of a question for whatever framework you're using

For NextJS, you can have a look at https://nextjs.org/docs/app/building-your-application/routing/internationalization

[languid sandal]

Thank you for your input! I appreciate the suggestion to consider Next.js's internationalization feature. However, I wanted to clarify that this question is indeed related to Payload CMS. The purpose of my post is to gather insights on different approaches for implementing region-specific content delivery, not just restricted to any single framework.

Your suggestion about using Next.js's internationalization is valid, but I was curious why you’d recommend it over Payload's built-in features for managing localization and routing. Are there specific advantages to using Next.js for this purpose, or are you suggesting it based on personal experience?

Currently, I'm implementing the region detection with middleware, where I check for the CF-IPCountry header provided by Cloudflare. If it's not available, I then check the user's preferred language settings in the browser to determine their region. I store this information in a cookie for future visits and then redirect the user to the region-specific URL.

However, I'm facing challenges, particularly with server-side components like ArchiveBlock when trying to retrieve the region from the URL. This is why I wanted to open up a discussion to see if there are better or more efficient ways to handle this, especially within the Payload ecosystem.

Would love to hear more about your thoughts on this and whether anyone else has tackled a similar issue!

[verbal valve]

You asked about region detection in the frontend, which would be implemented by you

Payload does have localization where a single entity can have multiple translations though

By payload managing routing, do you mean you're using the nested docs plugin?

[languid sandal]

Thanks for the clarification! I didn't use any plugins, such as the nested docs plugin. Instead, I manually added a node to the file structure to represent the region in the URL. Here's what it looks like:

├── src
│ ├── app
│ │ ├── (pages)
│ │ │ └── [region]
│ │ │ ├── [slug]
│ │ │ │ ├── index.module.scss
│ │ │ │ └── page.tsx
│ │ │ ├── index.module.scss
│ │ │ ├── not-found.tsx
│ │ │ ├── page.tsx
│ │ │ └── products
│ │ │ ├── Filters
│ │ │ │ ├── index.module.scss
│ │ │ │ └── index.tsx
│ │ │ ├── [slug]
│ │ │ │ ├── page.module.scss
│ │ │ │ └── page.tsx
│ │ │ ├── index.module.scss
│ │ │ └── page.tsx

This setup allows me to handle region-specific routing by simply creating a directory for each region within the src/app structure. It's a straightforward approach, but I still encounter challenges, particularly in handling region detection and routing efficiently.

Regarding Payload's localization feature, I understand that it supports multiple translations for a single entity. However, in my case, I need to manage different content per region, which goes beyond just translation—it’s more about displaying region-specific products and pages.

I was curious about the differences between using Payload's localization and a more custom routing approach like the one I've implemented. Also, I'm interested in how others have approached region detection, whether through middleware or other strategies, to manage this on the frontend.

Any insights or experiences with handling this kind of setup would be really helpful!

[verbal valve]

in terms of content management, you can skip filling out fields for locales that you don't want to show content for, and when you specify fallbackLocale: 'none' in your where clause when querying the page, payload's local API will return null for the localized field and you can use it as a hint that the entity should not be shown to this user (https://payloadcms.com/docs/beta/configuration/localization)

how to detect the locale and do the redirect is covered in https://nextjs.org/docs/app/building-your-application/routing/internationalization

[little haven]

I found this to work well, although I used [locale] instead of [region].

Now the problem I'm facing is that I can't properly preview these paths in the admin console. Have you figured that out?