I am working on a Next JS project with Contentful CMS building multiple blogs using common react components.
In Next JS I have pages hierarchy as : pages -> [domain] -> [locale] -> [slug.tsx]
Basically I have 3 arrays , 1 for list of supported languages (en, es, ....) and 1 array with list of custom locales (es-es, es-mx, ...) & 3rd is list of supported countries (us, ca, es, mx ...).
While building project, I each and every language with each and every country so as to make the url as [lang]-[country] pair ex: en-us. Well yeah, this is also an SEO requirement. Obviously I also check saved array of custom locale list (es-es, es-mx), so if this pair is found, I hit the CMS API with es-es instead of just es so I get the correct translation.
We are building static pages and our blog's URLs after the static build look like:
1. www.abc.com/en-us/blog1 -> english
2. www.abc.com/en-ca/blog1 -> english
3. www.abc.com/es-us/blog2 -> spanish
4. www.abc.com/es-es/blog3 -> spain spanish (custom locale)
5. www.abc.com/es-mx/blog4 -> mexican spanish (custom locale)
We get translated content from CMS and we add countries in the URL to target people worldwide.
However we had an SEO requirement that they wanted to show different content for someone speaking Spanish and lives in Spain (es-es) as compared to someone speaking spanish in US (es-us).
This results in a big and time consuming next JS build. Imagine 10 supported languages and 20 supported countries, so we will be building 300 blogs which is huge, considering the fact we just need to do it to support 3 custom locales. If we were not doing this, we could have just 10 landers based on each language.
We need to build so many landers because of the nature of Static functions by Next JS: getStaticProps, which require exact URL to be build during build time.
I am looking for some solutions to reduce this since once we start creating more multi lingual blogs, its going to be very complex building blogs and time consuming.