Auto Redirect

The AutoRedirect component detects the user's browser language and automatically redirects to the appropriate localized route. This solves the blank page issue that occurs when using Astro.redirect() in static mode.

Basic Usage

Import the component from astro-intl/components and use it in your root page (e.g., src/pages/index.astro). The component renders a client-side script that detects the browser language and redirects accordingly.

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>

Why Not Astro.redirect()?

In static mode (output: 'static'), Astro.redirect() causes a blank page to flash before the redirect happens. The AutoRedirect component avoids this by using client-side JavaScript to perform the redirect instantly without a page refresh.

Props

  • locales: Array of supported locale codes (e.g., ['en', 'es', 'fr'])
  • defaultLocale: Fallback locale when the browser language doesn't match any supported locale

Complete Example

Create a root page that redirects users to their preferred language:

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.