Skip to content
Astro i18n Next

Locale Detection

The locale detection middleware extracts the current locale from the URL pathname and makes it available on every request via Astro.locals.locale.

Setup

src/middleware.ts
import { createI18nMiddleware } from '@otrodigital/astro-i18n-next';
import { config } from 'virtual:i18n';


export const onRequest = createI18nMiddleware(config);

How it works

The middleware checks the first segment of the URL pathname against the configured locales:

URLDetected locale
/about/en (default)
/es/sobre/es
/es/saunas/modelo-165/es
/contact/en (default)

If no locale prefix is found, it defaults to defaultLocale.

Using the locale

Access the detected locale in any .astro component:

---
const locale = Astro.locals.locale;
---


<html lang={locale}>
  <body>
    <p>Current locale: {locale}</p>
  </body>
</html>

TypeScript typing

To type Astro.locals.locale, add this to your src/env.d.ts:

declare namespace App {
  interface Locals {
    locale: string;
  }
}

Programmatic locale detection

You can also extract the locale from a URL without the middleware using getLocaleFromPath:

import { getLocaleFromPath } from 'virtual:i18n';


getLocaleFromPath('/es/sobre/');  // "es"
getLocaleFromPath('/about/');     // "en" (default)

This is useful in scripts, API routes, or any context where the middleware hasn’t run.