i18n / locale routing

The loader inspects ?locale=… first, then Accept-Language, and loads matching strings server-side. Every render is a fresh server pick — no flash of the wrong language.

Tip
For automatic site-wide i18n routing (prefixed /en/…, /fr/… URLs), configure [i18n] strategy = "prefix" and locales in bext.config.toml. This manual pattern is useful for isolated pages or custom detection logic.

Detected locale: en

Hello

This page detected your locale from the request and picked English strings server-side.

Pick another locale:

src/app/examples/i18n/page.tsxTSX
// Manual locale detection — reads ?locale=… first, then Accept-Language.
// For site-wide /en/… prefix routing, set [i18n] strategy = "prefix"
// + locales in bext.config.toml; this demo keeps detection page-scoped.
function pickLocale(req: Request): string {
  const url = new URL(req.url);
  const q = url.searchParams.get("locale");
  if (q && STRINGS[q]) return q;
  const al = req.headers.get("accept-language") ?? "";
  for (const part of al.split(",")) {
    const tag = part.split(";")[0].trim().toLowerCase();
    const short = tag.split("-")[0];
    if (STRINGS[short]) return short;
  }
  return "en";
}

export async function loader({ request }: LoaderArgs) {
  const locale = pickLocale(request);
  return { locale, strings: STRINGS[locale] };
}

Related documentation

Internationalization