Browser Language Detection for Automatic Locale Selection

Users arrive at a site in the wrong language because the app does not detect their browser's preferred language.

On the server, read the Accept-Language header and negotiate the best-matching locale. On the client, use navigator.languages.

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

function getLocale(request) {
  const headers = { 'accept-language': request.headers.get('accept-language') ?? '' };
  const languages = new Negotiator({ headers }).languages();
  const locales = ['en', 'fr', 'de', 'ar'];
  try {
    return match(languages, locales, 'en');
  } catch {
    return 'en';
  }
}

// Client-side fallback
const preferredLocale = navigator.languages
  .find(lang => supportedLocales.includes(lang.split('-')[0]))
  ?? 'en';

Accept-Language is the standard HTTP mechanism for locale negotiation. It contains an ordered list with quality values, making it more reliable than IP geolocation for language preference.