I am currently working in a React app with i18n implemented to handle different languages.
Right now I have the same language for different countries, for instance imagine we talk about english for USA (en-US), Great Britain (en-GB) and Australia (en-AU). the 95% percent of the translations are the same, but there are particular cases for each locale why it make sense to have it internationalized (it makes more sense if you consider that there are other languages apart from english, for instance Spanish for Spain and LATAM countries, French and German).
I have the feeling it makes sense to have a file with translations like for instance, "Policy Privacy", because laws are different on each country, so you might have a file for each locale with the text that has to be shown, but on the other hand I am not sure about how to handle some specific words. that are different in a particular country, for instance in en-US is used "soccer" and "You can have..." while in UK is used "football" and "You can have"
My question is about how to handle this, because I think it makes no sense (because of maintenance) to have all translations for US in a en-US file and a replica in en-GB just to change the 5% of specific words.
So my approach was to have multiple .json files for each language, and then one british.json and american.json, so then I create a en-US.js file with translations where I merge all english translations with american translations:
import { common } from './common.json'
import { american } from './american.json'
enUS: {
common: {...common, ...american.common}
}
But on the other hand, I can not pass properly the linter because it can not compare american.json with british.json, and because in spanish, soccer is "fútbol" in all cases and makes no sense to have that translation out from common.js.
What is the best approach to use in this cases? Thanks