SSR Generation & Dynamic Routes with multiple languages

[Pfenya]

Hi,
i have been banging my head against this all day but cannot get it to work. I have tried searching here and via google and reading a bunch of documentation but nothing seems to be covering my case - or just passing over the piece of the puzzle i am missing.

I am building a website using Nuxt v3.10.3 with Strapi as a headless CMS. I have multiple locales and page names can be different per locale (also not all pages may be available in every locale).

I added @nuxtjs/i18n in version 8.1.1 to my project and added some basic configuration to my nuxt.config.ts file:

i18n: {
    customRoutes: 'config',
    strategy: 'prefix_and_default',
    defaultLocale: 'de-DE',
    detectBrowserLanguage: false,
    dynamicRouteParams: true,

    differentDomains: process.env.NODE_ENV === 'production',
    locales: [
      {
        code: 'pl',
        domain: localeDomains.pl,
        domainDefault: true
      },
      {
        code: 'cs',
        domain: localeDomains.pl,
        domainDefault: true
      },
      {
        code: 'de-DE',
        domain: localeDomains.de
      },
      {
        code: 'en',
        domain: localeDomains.de
      },
      {
        code: 'nl',
        domain: localeDomains.de
      },
    ]
  }

In my dynamic page template [...slug].vue I set it up to fetch the locale from use18n and use that in conjunction with the url without the locale prefix to fetch the page information from strapi:

const { locale : i18nLocale } = useI18n();
const route = useRoute()

const locale = i18nLocale.value;

let routeName = route.path;
if(routeName.startsWith("/")){
  routeName = routeName.substring(1)
}

if(routeName.startsWith(locale)){
  // would be pl/dywany - so removing locale plus the slash
  routeName = routeName.substring(locale.length+1)
}

  const pageKey = "pages::"+routeName+"::"+locale;
const { data: pagesData} = await useAsyncData<ApiPagePage>(
  pageKey, 
  () => find<ApiPagePage>('pages', pageParams),
  {
  getCachedData(pageKey){
    return nuxtApp.payload.data[pageKey] || nuxtApp.static.data[pageKey]
  }
  }
)
....

this works fine if I use npm nuxt dev to view the pages, it recognises the prefix and fetches the correct information based on that.

However, the goal is to pre-render the whole page and only deploy the static HTML pages. Since i am dealing with dynamic routes, I am fetching them and adding them to the nitro router:

async function  getDynamicPages() {
  var pages = []
  const { data } = await axios.get(strapiBaseUri + "/api/pages?sort[0]=title:asc&pagination[pageSize]=1000&pagination[page]=1&publicationState=live&locale=all");
  
  data.data.map((page) => {
      l
      pages.push(
        "/"+page.attributes.locale+'/'+page.attributes.slug
      )
      
    })
  
  console.log(pages);
  return pages;
}
.....


  hooks: {
    async 'nitro:config'(nitroConfig) {
      if (nitroConfig.dev) return
  
      let slugs = await getDynamicPages();
      nitroConfig.prerender.routes.push(...slugs);
      return
    },
  },

I can see all of the pages in the slug list when I use nuxi generate but the locale returned from useI18n remains on de-DE and all pages with a different locale string at the beginning return a 404 and do not get generated. I have tried several ideas on how to generate these but so far I have been unable to get it to work.

Does anyone have any input of how this would need to be done? Or will I need to overwrite the locale again in my page before fetching the data?

Thanks

Update: I assumed the defaultLocale was being used but I changed that to 'cs' just now but it is still the 'de-DE' pages it can find, not the rest. All of this is happening in docker containers

[Pfenya]

Found an answer - or at least one on the way. The locale config seems to be the cause of the problem. I updated it to a simple list and that worked:

    differentDomains: false,
    locales: ['de-DE','pl','cs','en-IE','nl','es', 'de-AT','hr', 'sk']

[Pfenya]

Can confirm that it is the domains part that makes this not work for me. One sentence in the documentation caught my eye with the info now in mind:

differentDomains
Set this to true when using different domains for each locale. If enabled, no prefix is added to your routes and you MUST configure locales as an array of objects, each containing a domain key.

With it hard-coded to no it works, with it set to differentDomains: (process.env.NODE_ENV === 'production') it fails. Meaning the actual question becomes: is there a way to combine different domains with dynamic routes and multiple locales when generating? or do i need to alter my setup to generate per domain.

[Pfenya]

I ended up doing separate docker containers per domain to be generated and setting the locales for each via environmental variables so that i can re-use the docker image but generate the different versions and also limit the dynamic routes to those for each domain by iterating over the locales I actively need.

const locales = process.env.LOCALES;
const localesArray = locales.split(",");


function getLocales(){
   let localesOut = locales.split(",");
  return localesOut;
}

  i18n: {
    customRoutes: 'config',
    strategy: 'prefix_except_default',
    defaultLocale: localesArray[0],
    detectBrowserLanguage: false,
    dynamicRouteParams: true,
    differentDomains: false,
    locales: getLocales()
      
  }