How to fallback to generic locale if country-specific is not available?

[empz]

I'm using next-int with a Next.js 14 App router using 18n routing. I assumed that if the browser locale was set to es-AR for example, the auto detection would try these locales in the following order:

1. es-AR
2. es
3. fallback locale (en in my case).

I only have the generic locales in my app (not country-specific). If I set my browser to "Spanish", then the auto detection works fine and the es locale is set. But if I set it to a country-specific Spanish locale, then it fallbacks to en.

Is there a way to have this behaviour automatically without having to explicitely list every country-specific locale?

[amannn]

next-intl reads the accept-language header and uses that to negotiate a matching locale. Did you check the value of the header in your case?

Based on your outcome, I'd assume that en is also in your list (even if secondary).

next-intl uses @formatjs/intl-localematcher under the hood for this matching.

Example:

import {match} from '@formatjs/intl-localematcher';

const requestedLocales = ['es-AR', 'en'];
const availableLocales = ['es', 'en'];
const defaultLocale = 'en';

// 'en', since 'en' is a supported language (even if ordered after 'es')
match(requestedLocales, availableLocales, defaultLocale)

However:

const requestedLocales = ['es-AR', 'de']; // Note that `en` is no longer requested
const availableLocales = ['es', 'en'];
const defaultLocale = 'en';

// 'es'
match(requestedLocales, availableLocales, defaultLocale)

I see your point though about why es is not used in the first example, since it's preferred (even if with a specific region). It could be worth discussing this upstream in @formatjs/intl-localematcher, there might be some nuance to this where a region could be too different from the base language.

However, checking e.g. my browser which has a preference for American English, but also German, the accept-language header looks like this:

en-US,en;q=0.9,de;q=0.8

So the browser also decided to add en to the list, so potentially in your case es could be added to the list too (might depend on the browser / OS).

[empz]

You're correct, that was my case.

If I only have "es-AR" in my browser, then that works and selects "es" as the default locale. But if I have "English" as a secondary option, then it uses "en".

Well, I guess I'll just leave it to people being smart enough to set a generic language in their OS/browser instead of a country specific.