amannn
commented
4 months ago Are you using the Pages or the App Router? useRouter().locale is only available in the Pages Router, that's why I'm wondering.
As for the App Router, this is covered in the docs: How can I split my messages into multiple files?.
In the Pages Router, you can split messages by route (example).
I'm going to close this as this is rather a usage question.
Is your feature request related to a problem? Please describe.
I have an application where I have a card, and this card receives an object. I map over this object and render all the cards. Since the object is very large, I created a JSON file and import this object into my application to keep the code cleaner. I pass it to this card component as a parameter. I wanted to make it so that the component with this JSON file could create two JSON files (one for each route, in my case /pt and /en) in the /message folder. However, one would be a specific JSON for that component to keep the code more organized, but I can't get it to work. So I tried the following solution: I thought about identifying which route I was on, whether it was /pt or /en, and using an if statement to decide which file to use, either the JSON with the object in pt or the JSON with the object in en. I wanted to do it this way to keep the code more organized, but I couldn't get it to work using either UseRouter or locale. I checked the documentation and didn't see support for this. Here is an example of one of the ways I tried:
javascript Copy code const { locale } = useRouter(); const projectsList = locale === 'pt' ? languagePT : languageEN; I also tried using useTranslation and couldn't get it to work either. Note: I already use it, and it works normally in my application, but I can't insert more than one JSON file that works for the same route.
Describe the solution you'd like
I would like the library or framework to have native support for dynamically loading JSON files based on the current route or locale. The ideal solution would allow the import and use of multiple JSON files specific to different routes or languages without the need for manual conditionals. This could be implemented with a method that automatically selects the correct JSON file based on the current locale. For example, if the route is /pt, the system automatically loads the corresponding JSON located in the correct folder, and if the route is /en, it loads the English JSON.
Describe alternatives you've considered
I considered using conditionals within the components to check the current locale and then manually load the corresponding JSON file. I tried using the useRouter hook to get the locale and apply conditional logic to import the correct JSON, as shown below:
javascript Copy code const { locale } = useRouter(); const projectsList = locale === 'pt' ? languagePT : languageEN; I also tried using the useTranslation hook to solve this but couldn't get it to work as expected. Additionally, I explored the official documentation but didn't find native support for this type of functionality. These alternatives did not work as expected, leaving the code less organized and more challenging to maintain.