Issues setting up domain based routing in Nextjs project on Vercel

[a-shakra]

Hello all,

I'm struggling to implement domain based routing in my application. Here is my routing.ts file:

const isDev = process.env.NODE_ENV === 'development';
const isPreview = process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview';

export const routing = defineRouting({
  locales: ['en', 'fr', 'es'],
  defaultLocale: 'en',
  domains: [
    {
        domain: isDev ? 'localhost:3000' : 'en.{mydomain}.app',
        defaultLocale: 'en',
        locales: ['en']
    },
    {
        domain: isDev ? 'localhost:3001' : 'fr.{mydomain}.app',
        defaultLocale: 'fr',
        locales: ['fr']
    },
    {
      domain: isDev ? 'localhost:3002' : 'es.{mydomain}.app',
      defaultLocale: 'es',
      locales: ['es']
    }
  ],
  localePrefix: isPreview ? 'always' : 'never'
});

The adjustments I've made to test locally and on my vercel preview branches work perfectly but no luck on my prod environment hosted on Vercel. If i add the subdomain, like so: www.fr.{mydomain}.app, i get a privacy warning error with https scratched out. If i remove the www., like fr.{mydomain.com}, i get a deployment not found error.

What could the issue be? Do i need to add any DNS records to my domain configuration to support these locale-based subdomains?

EDIT: instead of trying fr.{mydomain}.app, i tried {mydomain}.app/fr, the page then translates to my french translation while not indicating the locale in the subdomain (what i expect) or in the path (that makes sense given localePrefix is set to never) but I can navigate between different pages while maintaining the french translation. no idea how this is working 😬