Redirección Automática

El componente AutoRedirect detecta el idioma del navegador del usuario y redirige automáticamente a la ruta localizada apropiada. Esto resuelve el problema de la página en blanco que ocurre al usar Astro.redirect() en modo estático.

Uso Básico

Importa el componente desde astro-intl/components y úsalo en tu página raíz (ej: src/pages/index.astro). El componente renderiza un script del lado del cliente que detecta el idioma del navegador y redirige en consecuencia.

src/pages/index.astro 
---
import AutoRedirect from 'astro-intl/components';
---

<!doctype html>
<html lang="en">
  <head>
    <title>Redirecting...</title>
  </head>
  <body>
    <AutoRedirect 
      locales={['en', 'es', 'fr']} 
      defaultLocale="en" 
    />
  </body>
</html>

¿Por qué no Astro.redirect()?

En modo estático (output: 'static'), Astro.redirect() causa que una página en blanco parpadee antes de la redirección. El componente AutoRedirect evita esto usando JavaScript del lado del cliente para realizar la redirección instantáneamente sin recargar la página.

Props

  • locales: Array de códigos de locale soportados (ej: ['en', 'es', 'fr'])
  • defaultLocale: Locale de fallback cuando el idioma del navegador no coincide con ningún locale soportado

Ejemplo Completo

Crea una página raíz que redirija a los usuarios a su idioma preferido:

src/pages/index.astro 
---
// src/pages/index.astro
import AutoRedirect from 'astro-intl/components';
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Redirecting to your language...</title>
    <meta name="robots" content="noindex, follow" />
  </head>
  <body>
    <!-- 
      This component will:
      1. Detect the user's browser language
      2. Check if it matches any of the supported locales
      3. Redirect to /{locale}/ (fallback to defaultLocale)
    -->
    <AutoRedirect 
      locales={['en', 'es', 'fr']} 
      defaultLocale="en" 
    />
    
    <!-- Optional: Show a loading state while redirecting -->
    <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
      <p>Detecting your language...</p>
    </div>
  </body>
</html>

💡 Tip: The AutoRedirect component is designed specifically for static sites. If you're using SSR mode (output: 'server'), you can use Astro.redirect() instead for server-side redirects.