Tu web soporta `es`, `en` y `fr`. El navegador devuelve `['de-DE', 'fr-CA']`. ¿Qué decisión es la más correcta?

Si usas la lista completa de preferencias, puedes encontrar un idioma soportado aunque el primero no coincida.

Detectar el idioma del usuario y redirigir a la versión correcta

Aprende a leer el idioma del navegador, normalizar locales y redirigir de forma segura a la versión web adecuada sin crear bucles ni romper la experiencia del usuario.

¿Cuánto sabes de JavaScript?

📘 Teoría

Qué problema resuelve esta redirección

Detectar idioma no va de impresionar con una API: va de reducir fricción en una web internacional.

Piensa en una landing con versiones en español, inglés y francés. Si un usuario entra por la raíz `/`, lo razonable es enviarlo a la versión que mejor encaja con su navegador, pero sin secuestrar su navegación si ya eligió otra.

Ese matiz cambia mucho la implementación. Una redirección útil debe tomar una decisión clara, aplicar un fallback y evitar comportamientos molestos como volver a redirigir cada vez que se recarga la página.

Entrada

El usuario llega a `/` o a una portada neutra.

Sin idioma fijado aún
Sin preferencia guardada

Decisión

La web comprueba idioma preferido y soporte real.

`navigator.languages`
Mapa de idiomas válidos

Salida

Se envía a la ruta correcta o al fallback.

`/es/`
`/en/`
`/fr/`

Paso 1: leer el idioma del navegador sin asumir demasiado

La API más conocida es `navigator.language`, pero conviene conocer también `navigator.languages`.

`navigator.language` devuelve el idioma principal del navegador, por ejemplo `es-ES`, `es-MX` o `en-US`. Es suficiente para muchos casos simples, pero no te cuenta si el usuario tiene varias preferencias configuradas.

`navigator.languages` devuelve una lista ordenada por prioridad. Si existe, es mejor empezar por ahí porque te permite probar primero la preferencia principal y luego otras opciones válidas antes de caer en el fallback.

Usa `navigator.languages` si está disponible.
Mantén un fallback por si el navegador no expone esa lista.
No compares todavía contra rutas: primero normaliza.

Leer idioma principal y lista de preferencias

const primaryLocale = navigator.language || navigator.userLanguage || 'en';
const localeList = navigator.languages?.length
  ? navigator.languages
  : [primaryLocale];

console.log('Idioma principal:', primaryLocale);
console.log('Lista de preferencias:', localeList);

Paso 2: normalizar el locale y traducirlo a una ruta real

El navegador te da locales completos; tu web suele trabajar con códigos más simples.

Lo habitual es que tu web soporte idiomas base como `es`, `en` o `fr`, mientras que el navegador te devolverá variantes regionales como `es-AR` o `fr-CA`. Por eso conviene convertir `es-ES` en `es` antes de buscar la ruta.

Este paso evita condicionales interminables y te permite añadir idiomas nuevos editando un único objeto de configuración.

Normalizar locale y buscar ruta soportada

const SUPPORTED_LOCALES = {
  es: '/es/',
  en: '/en/',
  fr: '/fr/'
};

function normalizeLocale(locale) {
  return String(locale || '')
    .toLowerCase()
    .split('-')[0];
}

function getSupportedLocale(locales) {
  for (const locale of locales) {
    const normalized = normalizeLocale(locale);
    if (SUPPORTED_LOCALES[normalized]) {
      return normalized;
    }
  }

  return 'en';
}

Paso 3: redirigir sin crear bucles ni pelearte con el botón atrás

El error típico no está en detectar el idioma, sino en redirigir con demasiada agresividad.

Antes de redirigir debes comprobar si ya estás en la ruta correcta. Si no haces esa verificación, entrar en `/es/` podría lanzar otra redirección innecesaria y complicar el flujo.

Además, en este caso `window.location.replace()` suele ser mejor que `window.location.href = ...` porque sustituye la entrada actual del historial. Así evitas que el usuario pulse Atrás y vuelva a una página que lo redirige otra vez.

Comprueba siempre si ya estás en la versión correcta.
Usa `replace()` si no quieres ensuciar el historial.
Si hay selector manual de idioma, guarda esa decisión y salta la detección automática.

Comprobar ruta actual antes de redirigir

function isCurrentLocalePath(pathname, locale, routes) {
  const targetPath = routes[locale];
  return pathname === targetPath || pathname.startsWith(targetPath);
}

function redirectToLocale(locale, routes) {
  if (isCurrentLocalePath(window.location.pathname, locale, routes)) {
    return;
  }

  window.location.replace(routes[locale]);
}

Paso 4: montar el snippet final bien atado

Ahora sí: junta detección, normalización, preferencia guardada y redirección segura en una sola pieza reutilizable.

El snippet final de esta lección sigue cuatro reglas: primero respeta un idioma guardado, después revisa la lista de idiomas del navegador, luego cae en un fallback estable y por último evita redirigir si ya estás en la ruta correcta.

Ese orden importa. Si cambias la prioridad y obligas siempre a seguir el idioma del navegador, puedes romper la experiencia de alguien que prefiere ver la web en inglés aunque tenga el sistema en español.

Debug común: por qué a veces redirige mal

Los fallos más habituales son de criterio, no de sintaxis.

Comparar `es-ES` directamente contra una clave `es` y no normalizar el locale.
Olvidar el fallback y romper la navegación cuando llega un idioma no soportado como `de-DE`.
Usar `href` o `assign()` sin pensar en el historial y generar sensación de rebote al pulsar Atrás.
Forzar redirección incluso cuando la ruta actual ya pertenece a un idioma válido.
No respetar una preferencia guardada por el usuario y sobreescribirla en cada visita.

1 Qué problema resuelve esta redirección 2 Paso 1: leer el idioma del navegador sin asumir demasiado 3 Paso 2: normalizar el locale y traducirlo a una ruta real 4 Paso 3: redirigir sin crear bucles ni pelearte con el botón atrás 5 Paso 4: montar el snippet final bien atado 6 Debug común: por qué a veces redirige mal

🧭 Visuales clave

Flujo de detección y redirección por idioma

Resume la secuencia completa: preferencia guardada, lista del navegador, normalización, fallback y redirección con `replace()`.

Diagrama del flujo que pasa de idiomas del navegador a locale soportado y redirección segura

🧪 Aprende probando

Ejemplo Ejemplo guiado: elegir el primer idioma soportado Recorre la lista del navegador, normaliza cada locale y devuelve el primer idioma que tu web soporta.

⌄

Ejemplo Demo interactiva: ver qué ruta elegiría tu web Prueba distintas combinaciones de preferencias del navegador y observa cómo cambia la ruta objetivo antes de redirigir de verdad.

⌄

Ejemplo Snippet final: detección de idioma con fallback y redirección segura Versión lista para adaptar a tu web multidioma, con prioridad a la preferencia guardada y uso de `replace()` para no generar rebotes.

⌄

🏁 Retos

Reto Reto: construir `getLocaleRoute()` con fallback fiable Crea una función que reciba una lista de locales del navegador y devuelva la ruta correcta según tus idiomas soportados.

⌄

🧰 Recursos

Enlaces útiles

MDN: Navigator.language MDN: Navigator.languages MDN: Window.location MDN: Navigator.language MDN: Navigator.languages MDN: Window.location

Test

Comprueba tus conocimientos con un test sobre JavaScript.

Test de JavaScript

Recursos del curso 62

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 32

Persistencia en navegador: localStorage y sessionStorage

Lección 34

Fundamentos de asincronía: event loop, call stack y colas

›