I18n Support

[seanmcquaid]

Describe the Bug

This is more to start a discussion but just curious if there's a solution right now for localized routing??

Generouted Version

N/A

Your Example Website or App or Reproduction

N/A

Steps to Reproduce the Bug or Issue

N/A

Expected Behavior

N/A

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Browser version: [e.g. 91.1]

Additional context

No response

[d0whc3r]

Any idea on how to configure it? just the config interface

[seanmcquaid]

I think Next.js utilizes a rewrites config like this :

https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites

Not saying this is 100% what would be best but might be a good starting point!

[oedotme]

Hey @seanmcquaid @d0whc3r, there's nothing special about localization with generouted, you could follow any approach you could use/used with other file-based routing systems or routers any general.

Here's an example of a simple implementation with generouted: https://stackblitz.com/edit/github-1kbk7g leveraging optional dynamic route segments.

Translations are defined at src/locales/, exporting a simple type-safe useTranslations hook that accepts the current lang from the optional route param lang at :lang?/docs. In the example English, is the default language and accessible via /docs or /en/docs with other two available languages.

You still can use external providers to define translations, or store the language in a context instead of route params. It's pretty flexible.

Here's an example with Next.js I've encountered https://github.com/vercel/next.js/tree/canary/examples/with-i18n-rosetta in a similar approach to the example above.

Hope that helps!

[d0whc3r]

Perhaps @seanmcquaid meant having the routes translated, or having equivalents for different languages

[seanmcquaid]

Exactly what I meant!

[oedotme]

I'm not sure I get what you guys mean, could you please provide an example? Also could you detail what feature you expect to be in generouted for localization aside from the example I've made?

[seanmcquaid]

Yes! So for example if I have the following routes :

/user (English) /perfil (Spanish)

I would hope that there would be a config of some sort that would allow us to map to the /user route from /perfil. Otherwise, I have to maintain two separate directories for effectively the same page. Does that make sense? I can sketch something out if that would be helpful!

[oedotme]

@seanmcquaid Okay I see, tbh I haven't encountered an example or usage of that before. In general, if you're able to achieve that with any file-based routing system like Next.js or Remix — you'll be likely able to do the same with generouted.

[seanmcquaid]

Presently, I'm not seeing a way to do this besides using the same component but just importing it into it separate directories. I've seen this done with rewrites on Next.js/Remix that allows manual overrides for routing. Do you have any ideas how this can be implemented? I am happy to contribute if needed! Really appreciate your work here

[oedotme]

I'm not sure that's possible via React Router, also I'm not aware that Remix has rewrites support.

On the other hand, I'm wondering if the rewrites of the deployment platforms like Vercel or Netlify config would work.

[seanmcquaid]

Remix does support it indirectly! You can use the routes config to define routes for each localized route and point them to a specific file - https://remix.run/docs/en/main/discussion/routes#manual-route-configuration