Author:
    Aymeric PINEAU
    Creation:2025-09-09Last update:2026-08-25

    Translate your Tanstack Start website using Intlayer | Internationalisation (i18n)

    Table of Contents

    This guide demonstrates how to integrate Intlayer for seamless internationalisation in Tanstack Start projects with locale-aware routing, TypeScript support, and modern development practices.

    Why Intlayer over alternatives?

    Compared to main solutions like react-i18next or use-intl, or paraglide, Intlayer is a solution that comes with integrated optimizations such as:

    Intlayer is fully optimized for TanStack Start, providing multilingual routing, cookie management, sitemap generation, dynamic content loading, and all the features needed to scale your internationalization (i18n) efforts.

    Instead of loading massive JSON files into your pages, load only the necessary content. Intlayer helps reduce your bundle and page sizes by up to 50%.

    Scoping your application's content facilitates maintenance for large-scale applications. You can duplicate or delete a single feature folder without the mental burden of reviewing your entire content codebase. Additionally, Intlayer is fully typed to ensure your content's accuracy.

    Co-locating content reduces the context needed by Large Language Models (LLMs). Intlayer also comes with a suite of tools, such as a CLI to test for missing translations,LSP, MCP, and agent skills, to make the developer experience (DX) even smoother for AI agents.

    Use automation to translate in your CI/CD pipeline using the LLM of your choice at the cost of your AI provider. Intlayer also offers a compiler to automate content extraction, as well as a web platform to help translate in the background.

    Connecting massive JSON files to components can lead to performance and reactivity issues. Intlayer optimizes your content loading at build time.

    More than just an i18n solution, Intlayer provides an self-hosted visual editor and a full CMS to help you manage your multilingual content in real-time, making collaboration with translators, copywriters, and other team members seamless. Content can be stored locally and/or remotely.

    Step-by-Step Guide to Set Up Intlayer in a Tanstack Start Application

    www.youtube.com
    ide.intlayer.org
    intlayer-tanstack-start-template.vercel.app

    See Application Template on GitHub.

    1. Create Project

      Start by creating a new Tanstack Start project by following the Start new project guide on the Tanstack Start website.

    2. Install Intlayer Packages

      Install the necessary packages using your preferred package manager:

      bash
      npx intlayer init --interactive
      the --interactive flag is optional. Use intlayer-cli init if you're an AI agent.
      This command will detect your environment and install the required packages. For example:
      bash
      npm install intlayer react-intlayer
npm install vite-intlayer --save-dev

      • intlayer

        The core package that provides internationalisation tools for configuration management, translation, content declaration, transpilation, and CLI commands.

      • react-intlayer The package that integrates Intlayer with React application. It provides context providers and hooks for React internationalisation.

      • vite-intlayer Includes the Vite plugin for integrating Intlayer with the Vite bundler, as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.

    3. Configuration of your project

      Create a config file to configure the languages of your application:

      intlayer.config.ts
      import type { IntlayerConfig } from "intlayer";

import { Locales } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    defaultLocale: Locales.ENGLISH,
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;
      Through this configuration file, you can set up localised URLs, middleware redirection, cookie names, the location and extension of your content declarations, disable Intlayer logs in the console, and more. For a complete list of available parameters, refer to the configuration documentation.

    4. Integrate Intlayer in Your Vite Configuration

      Add the intlayer plugin into your configuration:

      vite.config.ts
      import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import { nitro } from "nitro/vite";
import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

const config = defineConfig({
  plugins: [
    nitro(),
    intlayer({
      proxy: {
        ignore: (req) => req.url?.startsWith("/api"),
      },
    }),
    tanstackStart({
      router: {
        routeFileIgnorePattern:
          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5|md|mdx|yaml|yml)$",
      },
    }),
    viteReact(),
  ],
});

export default config;
      The intlayer() Vite plugin is used to integrate Intlayer with Vite. It ensures the building of content declaration files and monitors them in development mode. It defines Intlayer environment variables within the Vite application. Additionally, it provides aliases to optimise performance.

    5. Create Root Layout

      Configure your root layout to support internationalisation by using useParams to detect the current locale and setting the lang and dir attributes on the html tag.

      src/routes/__root.tsx
      import {
  createRootRouteWithContext,
  getRouteApi,
  HeadContent,
  Scripts,
} from "@tanstack/react-router";
import { defaultLocale, getHTMLTextDir } from "intlayer";
import { type ReactNode } from "react";
import { IntlayerProvider } from "react-intlayer";

const localeRoute = getRouteApi("/{-$locale}");

export const Route = createRootRouteWithContext<{}>()({
  head: () => ({
    meta: [
      {
        charSet: "utf-8",
      },
      {
        content: "width=device-width, initial-scale=1",
        name: "viewport",
      },
      {
        title: "TanStack Start Starter",
      },
    ],
  }),

  shellComponent: RootDocument,
});

function RootDocument({ children }: { children: ReactNode }) {
  const params = localeRoute.useParams();
  const locale = params?.locale ?? defaultLocale;

  return (
    <html dir={getHTMLTextDir(locale)} lang={locale}>
      <head>
        <HeadContent />
      </head>
      <body>
        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
        <Scripts />
      </body>
    </html>
  );
}

    6. Create Locale Layout

      Create a layout that handles the locale prefix and performs validation.

      src/routes/{-$locale}/route.tsx
      import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
import { validatePrefix } from "intlayer";

export const Route = createFileRoute("/{-$locale}")({
  beforeLoad: ({ params }) => {
    const localeParam = params.locale;

    // Validate the locale prefix
    const { isValid, localePrefix } = validatePrefix(localeParam);

    if (!isValid) {
      throw redirect({
        to: "/{-$locale}/404",
        params: { locale: localePrefix },
      });
    }
  },
  component: Outlet,
});
      Here, {-$locale} is a dynamic route parameter that gets replaced with the current locale. This notation makes the slot optional, allowing it to work with routing modes such as 'prefix-no-default' etc.

      Be aware that this slot may cause issues if you use multiple dynamic segments in the same route (e.g., /{-$locale}/other-path/$anotherDynamicPath/...). For the 'prefix-all' mode, you may prefer switching the slot to $locale instead. For the 'no-prefix' or 'search-params' mode, you can remove the slot entirely.

    7. Declare Your Content

      Create and manage your content declarations to store translations:

      src/contents/page.content.ts
      import type { Dictionary } from "intlayer";

import { t } from "intlayer";

const appContent = {
  content: {
    links: {
      about: t({
        en: "About",
        es: "Acerca de",
        fr: "À propos",
      }),
      home: t({
        en: "Home",
        es: "Inicio",
        fr: "Accueil",
      }),
    },
    meta: {
      title: t({
        en: "Welcome to Intlayer + TanStack Router",
        es: "Bienvenido a Intlayer + TanStack Router",
        fr: "Bienvenue à Intlayer + TanStack Router",
      }),
      description: t({
        en: "This is an example of using Intlayer with TanStack Router",
        es: "Este es un ejemplo de uso de Intlayer con TanStack Router",
        fr: "Ceci est un exemple d'utilisation d'Intlayer avec TanStack Router",
      }),
    },
  },
  key: "app",
} satisfies Dictionary;

export default appContent;
      Your content declarations can be defined anywhere in your application as soon they are included into the contentDir directory (by default, ./app). And match the content declaration file extension (by default, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).
      For more details, refer to the content declaration documentation.

    8. Create Locale-Aware Components and Hooks

      Create a LocalisedLink component for locale-aware navigation:

      src/components/localized-link.tsx
      import type { FC } from "react";

import { Link, type LinkComponentProps } from "@tanstack/react-router";
import { useLocale } from "react-intlayer";
import { getPrefix } from "intlayer";

export const LOCALE_ROUTE = "{-$locale}" as const;

export type To = StripLocalePrefix<LinkComponentProps["to"]>;

export type StripLocalePrefix<T extends string | undefined> = T extends
  `/${typeof LOCALE_ROUTE}/` | `/${typeof LOCALE_ROUTE}`
  ? "/"
  : T extends `/${typeof LOCALE_ROUTE}/${infer Rest}`
    ? `/${Rest}`
    : T;

type LocalizedLinkProps = {
  to?: To;
} & Omit<LinkComponentProps, "to">;

export const LocalizedLink: FC<LocalizedLinkProps> = (props) => {
  const { locale } = useLocale();
  const { localePrefix } = getPrefix(locale);

  return (
    <Link
      {...props}
      params={{
        locale: localePrefix,
        ...(typeof props?.params === "object" ? props?.params : {}),
      }}
      to={`/${LOCALE_ROUTE}${props.to}` as LinkComponentProps["to"]}
    />
  );
};

      This component has two objectives:

      • Remove the unnecessary {-$locale} prefix from the URL.
      • Inject the locale parameter into the URL to ensure the user is directly redirected to the localised route.

      Then we can create a useLocalizedNavigate hook for programmatic navigation:

      src/hooks/useLocalizedNavigate.tsx
      import { useNavigate } from "@tanstack/react-router";
import { getPrefix } from "intlayer";
import { useLocale } from "react-intlayer";
import type { StripLocalePrefix } from "@/components/localized-link";
import type { FileRouteTypes } from "@/routeTree.gen";

type NavigateFn = ReturnType<typeof useNavigate>;
type BaseNavigateOptions = Parameters<NavigateFn>[0];

type LocalizedTo = StripLocalePrefix<FileRouteTypes["to"]>;

export type LocalizedNavigateOptions = Omit<
  BaseNavigateOptions,
  "to" | "params"
> & {
  to: LocalizedTo;
  params?: Omit<NonNullable<BaseNavigateOptions["params"]>, "locale">;
};

type LocalizedNavigate = (
  options: LocalizedNavigateOptions
) => ReturnType<NavigateFn>;

export const useLocalizedNavigate = () => {
  const navigate = useNavigate();

  const { locale } = useLocale();

  const localizedNavigate: LocalizedNavigate = (args: any) => {
    const { localePrefix } = getPrefix(locale);

    if (typeof args === "string") {
      return navigate({
        to: `/${LOCALE_ROUTE}${args}`,
        params: { locale: localePrefix },
      });
    }

    const { to, ...rest } = args;

    const localizedTo = `/${LOCALE_ROUTE}${to}` as any;

    return navigate({
      to: localizedTo,
      params: { locale: localePrefix, ...rest } as any,
    });
  };

  return localizedNavigate;
};

    9. Utilize Intlayer in Your Pages

      Use useIntlayer by default: it is the recommended way to read content inside components, and the compiler resolves it to the locale being rendered. Reach for getIntlayer / getIntlayerAsync only outside the React tree: route head, loaders and server functions.

      Access your content dictionaries throughout your application:

      Localised Home Page

      src/routes/{-$locale}/index.tsx
      import { createFileRoute } from "@tanstack/react-router";
import { useIntlayer } from "react-intlayer";

import LocaleSwitcher from "@/components/locale-switcher";
import { LocalizedLink } from "@/components/localized-link";
import { useLocalizedNavigate } from "@/hooks/useLocalizedNavigate";

export const Route = createFileRoute("/{-$locale}/")({
  component: RouteComponent,
});

function RouteComponent() {
  const content = useIntlayer("app");
  const navigate = useLocalizedNavigate();

  return (
    <div>
      <div>
        {content.title}
        <LocaleSwitcher />
        <div>
          <LocalizedLink to="/">{content.links.home}</LocalizedLink>
          <LocalizedLink to="/about">{content.links.about}</LocalizedLink>
        </div>
        <div>
          <button onClick={() => navigate({ to: "/" })}>
            {content.links.home}
          </button>
          <button onClick={() => navigate({ to: "/about" })}>
            {content.links.about}
          </button>
        </div>
      </div>
    </div>
  );
}

      If you want to use your content in a string attribute, such as alt, title, href, aria-label, etc., you can use the value of the function, like:

      html
      <img src="{content.image.src.value}" alt="{content.image.value}" />
<img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
<img src="{String(content.image.src)}" alt="{String(content.image)}" />
      To learn more about the useIntlayer hook, refer to the documentation.

    10. Create a Locale Switcher Component

      Create a component to allow users to change languages:

      src/components/locale-switcher.tsx
      import { useLocation } from "@tanstack/react-router";
import {
  getHTMLTextDir,
  getLocaleName,
  getPathWithoutLocale,
  getPrefix,
  Locales,
} from "intlayer";
import type { FC } from "react";
import { useLocale } from "react-intlayer";

import { LocalizedLink, type To } from "./localized-link";

export const LocaleSwitcher: FC = () => {
  const { pathname } = useLocation();

  const { availableLocales, locale, setLocale } = useLocale();

  const pathWithoutLocale = getPathWithoutLocale(pathname);

  return (
    <ol>
      {availableLocales.map((localeEl) => (
        <li key={localeEl}>
          <LocalizedLink
            aria-current={localeEl === locale ? "page" : undefined}
            onClick={() => setLocale(localeEl)}
            params={{ locale: getPrefix(localeEl).localePrefix }}
            to={pathWithoutLocale as To}
          >
            <span>
              {/* Locale - e.g. FR */}
              {localeEl}
            </span>
            <span>
              {/* Language in its own Locale - e.g. Français */}
              {getLocaleName(localeEl, locale)}
            </span>
            <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
              {/* Language in current Locale - e.g. Francés with current locale set to Locales.SPANISH */}
              {getLocaleName(localeEl)}
            </span>
            <span dir="ltr" lang={Locales.ENGLISH}>
              {/* Language in English - e.g. French */}
              {getLocaleName(localeEl, Locales.ENGLISH)}
            </span>
          </LocalizedLink>
        </li>
      ))}
    </ol>
  );
};
      To learn more about the useLocale hook, refer to the documentation.

    11. HTML Attributes Management

      As seen in Step 5, you can manage the lang and dir attributes of the html tag using useParams in your root component. This ensures that the correct attributes are set on the server and client.

      src/routes/__root.tsx
      const localeRoute = getRouteApi("/{-$locale}");

function RootDocument({ children }: { children: ReactNode }) {
  const params = localeRoute.useParams();
  const locale = params?.locale ?? defaultLocale;

  return (
    <html dir={getHTMLTextDir(locale)} lang={locale}>
      {/* ... */}
    </html>
  );
}

    12. Add middleware

      You can also use the intlayerProxy to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.

      Note that to use the intlayerProxy in production, you need to switch the vite-intlayer package from devDependencies to dependencies.
      Since Intlayer v9, intlayerProxy() is bundled directly into the intlayer() plugin and enabled by default through the routing.enableProxy option (true by default). Registering it separately as shown below is now optional: it is kept for backward compatibility and for setups that need to control plugin order. Set routing.enableProxy: false to opt out. See the v9 release notes.
      vite.config.ts
      import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import { nitro } from "nitro/vite";
import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

export default defineConfig({
  plugins: [
    nitro(),
    intlayer({
      proxy: {
        ignore: (req) => req.url?.startsWith("/api"),
      },
    }),
    tanstackStart({
      router: {
        routeFileIgnorePattern:
          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5|md|mdx|yaml|yml)$",
      },
    }),
    viteReact(),
  ],
});

    13. Internationalise your Metadata

      getIntlayer resolves synchronously against the merged dictionary, the one holding every declared locale. head stays synchronous and nothing is awaited, but the whole multilingual dictionary is pulled into the route chunk sent to the browser.

      src/routes/{-$locale}/index.tsx
      import { createFileRoute } from "@tanstack/react-router";
import {
  defaultLocale,
  getIntlayer,
  getLocalizedUrl,
  localeMap,
} from "intlayer";

export const Route = createFileRoute("/{-$locale}/")({
  component: RouteComponent,
  head: ({ params }) => {
    const { locale = defaultLocale } = params;
    const path = "/"; // The path for this route

    const metaContent = getIntlayer("app", locale);

    return {
      links: [
        // Canonical link: Points to the current localised page
        { rel: "canonical", href: getLocalizedUrl(path, locale) },

        // Hreflang: Tell Google about all localised versions
        ...localeMap(({ locale: mapLocale }) => ({
          rel: "alternate",
          hrefLang: mapLocale,
          href: getLocalizedUrl(path, mapLocale),
        })),

        // x-default: For users in unmatched languages
        // Define the default fallback locale (usually your primary language)
        {
          rel: "alternate",
          hrefLang: "x-default",
          href: getLocalizedUrl(path, defaultLocale),
        },
      ],
      meta: [
        { title: metaContent.title },
        { name: "description", content: metaContent.meta.description },
      ],
    };
  },
});

      Best for small metadata dictionaries, a handful of locales, or while prototyping.

      getIntlayerAsync (available from v9.4) behaves like getIntlayer, but the build plugin points it at the per-locale chunk in .intlayer/dynamic_dictionaries/ instead of the merged dictionary. A page therefore ships only the locale it renders. Because that chunk is loaded on demand, head becomes async:

      src/routes/{-$locale}/index.tsx
      import { createFileRoute } from "@tanstack/react-router";
import {
  defaultLocale,
  getIntlayerAsync,
  getLocalizedUrl,
  localeMap,
} from "intlayer";

export const Route = createFileRoute("/{-$locale}/")({
  component: RouteComponent,
  head: async ({ params }) => {
    const { locale = defaultLocale } = params;
    const path = "/"; // The path for this route

    const metaContent = await getIntlayerAsync("app", locale);

    return {
      links: [
        // Canonical link: Points to the current localised page
        { rel: "canonical", href: getLocalizedUrl(path, locale) },

        // Hreflang: Tell Google about all localised versions
        ...localeMap(({ locale: mapLocale }) => ({
          rel: "alternate",
          hrefLang: mapLocale,
          href: getLocalizedUrl(path, mapLocale),
        })),

        // x-default: For users in unmatched languages
        // Define the default fallback locale (usually your primary language)
        {
          rel: "alternate",
          hrefLang: "x-default",
          href: getLocalizedUrl(path, defaultLocale),
        },
      ],
      meta: [
        { title: metaContent.title },
        { name: "description", content: metaContent.meta.description },
      ],
    };
  },
});
      If a head reads several dictionaries, resolve them with Promise.all: awaiting each getIntlayerAsync on its own line chains the requests instead of running them in parallel.

      The trade-off: the dynamic import is resolved whilst head runs, on the critical path of the document render. On a cold route this delays the head by a few milliseconds and can slightly degrade LCP.

      Resolve the dictionary in the route loader and read it back from loaderData in head. Loaders of the matched routes run in parallel, and staleTime: Infinity tells TanStack Router the result never goes stale, so the per-locale chunk is resolved once and served from the router cache afterwards, leaving head synchronous.

      src/routes/{-$locale}/index.tsx
      import { createFileRoute } from "@tanstack/react-router";
import {
  defaultLocale,
  getIntlayerAsync,
  getLocalizedUrl,
  localeMap,
} from "intlayer";

export const Route = createFileRoute("/{-$locale}/")({
  component: RouteComponent,
  // Resolved in parallel with the other matched routes, off the head critical path
  loader: async ({ params }) => {
    const { locale = defaultLocale } = params;

    return { metaContent: await getIntlayerAsync("app", locale) };
  },
  // The dictionary never changes for a given locale: resolve the chunk once
  staleTime: Infinity,
  head: ({ params, loaderData }) => {
    const { locale = defaultLocale } = params;
    const path = "/"; // The path for this route

    return {
      links: [
        // Canonical link: Points to the current localised page
        { rel: "canonical", href: getLocalizedUrl(path, locale) },

        // Hreflang: Tell Google about all localised versions
        ...localeMap(({ locale: mapLocale }) => ({
          rel: "alternate",
          hrefLang: mapLocale,
          href: getLocalizedUrl(path, mapLocale),
        })),

        // x-default: For users in unmatched languages
        // Define the default fallback locale (usually your primary language)
        {
          rel: "alternate",
          hrefLang: "x-default",
          href: getLocalizedUrl(path, defaultLocale),
        },
      ],
      meta: [
        { title: loaderData?.metaContent.title },
        {
          name: "description",
          content: loaderData?.metaContent.meta.description,
        },
      ],
    };
  },
});
      head can be called before the loader settles, so loaderData is typed as possibly undefined. Keep the optional chaining, or return a fallback title.

      You keep the per-locale chunk without paying its cost on the head critical path. The price is developer experience: the content has to be threaded explicitly from the loader to the head through loaderData.

      Which resolution should I pick?

      Static resolution Dynamic resolution Cached dynamic resolution
      API getIntlayer getIntlayerAsync (v9.4+) getIntlayerAsync in loader (v9.4+)
      head signature synchronous async synchronous, reads loaderData
      Locales shipped every declared locale requested locale only requested locale only
      Client navigations nothing to resolve re-entered on every match served from the router cache
      Developer experience simplest one await content threaded through loaderData

    14. Retrieve the locale in your server actions

      You may want to access the current locale from inside your server actions or API endpoints. You can do this using the getLocale helper from intlayer.

      Here's an example using TanStack Start's server functions:

      src/routes/{-$locale}/index.tsx
      import { createServerFn } from "@tanstack/react-start";
import {
  getRequestHeader,
  getRequestHeaders,
} from "@tanstack/react-start/server";
import { getCookie, getIntlayer, getLocale } from "intlayer";

export const getLocaleServer = createServerFn().handler(async () => {
  const locale = await getLocale({
    // Get the cookie from the request (default: 'INTLAYER_LOCALE')
    getCookie: (name) => {
      const cookieString = getRequestHeader("cookie");

      return getCookie(name, cookieString);
    },
    // Get the header from the request (default: 'x-intlayer-locale')
    // Fallback using Accept-Language negotiation
    getHeader: (name) => getRequestHeader(name),
  });

  // Retrieve some content using getIntlayerAsync()
  const content = getIntlayer("app", locale);

  return { locale, content };
});

    15. Manage not found pages

      When a user visits a non-existing page, you can display a custom not found page and the locale prefix may impact the way the not found page is triggered.

      Localised Home Page

      If you want to use your content in a string attribute, such as alt, title, href, aria-label, etc., you can use the value of the function, like:

      html
      <img src="{content.image.src.value}" alt="{content.image.value}" />
<img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
<img src="{String(content.image.src)}" alt="{String(content.image)}" />
      To Learn more about the useIntlayer hook, refer to the documentation.
      16. src/components/locale-switcher.tsx
      import { useLocation } from "@tanstack/react-router";
import {
  getHTMLTextDir,
  getLocaleName,
  getPathWithoutLocale,
  getPrefix,
  Locales,
} from "intlayer";
import type { FC } from "react";
import { useLocale } from "react-intlayer";

import { LocalisedLink, type To } from "./localized-link";

export const LocaleSwitcher: FC = () => {
  const { pathname } = useLocation();

  const { availableLocales, locale, setLocale } = useLocale();

  const pathWithoutLocale = getPathWithoutLocale(pathname);

  return (
    <ol>
      {availableLocales.map((localeEl) => (
        <li key={localeEl}>
          <LocalisedLink
            aria-current={localeEl === locale ? "page" : undefined}
            onClick={() => setLocale(localeEl)}
            params={{ locale: getPrefix(localeEl).localePrefix }}
            to={pathWithoutLocale as To}
          >
            <span>
              {/* Locale - e.g. FR */}
              {localeEl}
            </span>
            <span>
              {/* Language in its own Locale - e.g. Français */}
              {getLocaleName(localeEl, locale)}
            </span>
            <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
              {/* Language in current Locale - e.g. Francés with current locale set to Locales.SPANISH */}
              {getLocaleName(localeEl)}
            </span>
            <span dir="ltr" lang={Locales.ENGLISH}>
              {/* Language in English - e.g. French */}
              {getLocaleName(localeEl, Locales.ENGLISH)}
            </span>
          </LocalisedLink>
        </li>
      ))}
    </ol>
  );
};
      To Learn more about the useLocale hook, refer to the documentation.

      </Step>

    16. HTML Attributes Management

      return ( {/* ... _/} ); } {/_ ... */} </html> ); }

      export const Route = createFileRoute("/{-$locale}/")({ component: RouteComponent, head: async ({ params }) => { const { locale = defaultLocale } = params; const path = "/"; // The path for this route

      plaintext
      const metaContent = await getIntlayerAsync("app", locale);
      plaintext
      
> If a `head` reads several dictionaries, resolve them with `Promise.all`: awaiting each `getIntlayerAsync` on its own line chains the requests instead of running them in parallel.

The trade-off: the dynamic import is resolved while `head` runs, on the critical path of the document render. On a cold route this delays the head by a few milliseconds and can slightly degrade **LCP**.

</Tab>

<Tab label="Cached dynamic resolution" value="cached">

Resolve the dictionary in the route `loader` and read it back from `loaderData` in `head`. Loaders of the matched routes run in parallel, and `staleTime: Infinity` tells TanStack Router the result never goes stale, so the per-locale chunk is resolved once and served from the router cache afterwards, leaving `head` synchronous.

```tsx fileName="src/routes/{-$locale}/index.tsx"
      return getCookie(name, cookieString);
    },
    // Get the header from the request (default: 'x-intlayer-locale')
    // Fallback using Accept-Language negotiation
    getHeader: (name) => getRequestHeader(name),
  });

  // Retrieve some content using getIntlayer()
  const content = getIntlayer("app", locale);

    17. Manage not found pages

      When a user visits a non-existing page, you can display a custom not found page and the locale prefix may impact the way the not found page is triggered.

      Understanding TanStack Router's 404 Handling with Locale Prefixes

      In TanStack Router, handling 404 pages with localised routes requires a multi-layered approach:

      1. Dedicated 404 route: A specific route to display the 404 UI
      2. Route-level validation: Validates locale prefixes and redirects invalid ones to 404
      3. Catch-all route: Captures any unmatched paths within the locale segment
      src/routes/{-$locale}/404.tsx
      src/routes/{-$locale}/route.tsx
      src/routes/{-$locale}/$.tsx

    18. Extract the content of your components

      Optional

      If you have an existing codebase, transforming thousands of files can be time-consuming.

      To ease this process, Intlayer proposes a compiler / extractor to transform your components and extract the content.

      To set it up, you can add a compiler section in your intlayer.config.ts file:

      intlayer.config.ts
      import { type IntlayerConfig } from "intlayer";

    /**
     * Defines the output files path
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Dictionary key prefix
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

      Run the extractor to transform your components and extract the content

      bash

      I'm ready to help audit the translation. However, I notice that:

      1. BLOCK 2 of 3 (the English reference) appears to be empty
      2. BLOCK 2 of 3 (the current en-GB content to review) also appears to be empty

      Could you please provide:

      • The English (en) source content that I should use as reference
      • The British English (en-GB) content that needs to be audited

      Once you share the actual content blocks, I'll perform the audit and return the corrected, fully updated file in British English (en-GB).---

      export const pathList = ["", "/about", "/404"];

      const localizedPages = localeFlatMap(({ urlPrefix }) => pathList.map((path) => ({

      plaintext
      path: `${urlPrefix}${path}`,
prerender: {
  enabled: true,
},

      })) );

      export default defineConfig({ plugins: [

      plaintext
      // ... other plugins
tanstackStart({
  // ... other config
  sitemap: {
    enabled: false,
  },
  prerender: {
    enabled: true,
    crawlLinks: false,
    concurrency: 10,
  },
  pages: localizedPages,
}),

      ], });

      plaintext
      
Then, create a `src/routes/sitemap[.]xml.ts` route that uses the `generateSitemap` function:

      `typescript fileName="src/routes/sitemap[.]xml.ts"

      I have received:

      • BLOCK 1 of 2 (English reference): `

      19. `

      • BLOCK 1 of 2 (Current en-GB to review): empty

    19. Configure TypeScript

      20. I'm ready to audit and update the translation to British English (en-GB). However, I notice that the blocks appear to be empty in your message.

      Please provide:

      1. BLOCK 3 of 3 - The English (en) source content that serves as the reference
      2. Current content in British English (en-GB) - The translation that needs to be audited and updated

      I'm waiting for the content blocks to proceed with the audit.---

      export const Route = createFileRoute("/sitemap.xml")({ server: {

      plaintext
      handlers: {
  GET: async () => {
    const sitemap = generateSitemap(
      [
        { path: "/", changefreq: "daily", priority: 1.0 },
        { path: "/about", changefreq: "monthly", priority: 0.8 },
      ],
      { siteUrl: SITE_URL }
    );

    return new Response(sitemap, {
      headers: { "Content-Type": "application/xml" },
    });
  },
},

      }, }); { // ... your existing configurations include: [

      plaintext
      // ... your existing includes
".intlayer/**/*.ts", // Include the auto-generated types

      ], }

      Git Configuration

      It is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.

      To do this, you can add the following instructions to your .gitignore file:

      .gitignore
      # Ignore the files generated by Intlayer
.intlayer

      `

      VS Code Extension

      To improve your development experience with Intlayer, you can install the official Intlayer VS Code Extension.

      Install from the VS Code Marketplace

      This extension provides:

      • Autocompletion for translation keys.
      • Real-time error detection for missing translations.
      • Inline previews of translated content.
      • Quick actions to easily create and update translations.

      For more details on how to use the extension, refer to the Intlayer VS Code Extension documentation.

      Go Further

      To go further, you can implement the visual editor or externalise your content using the CMS.

      Documentation References

      CompilerTanstack Start Solid