Autore:
    Aymeric PINEAU
    Creazione:2025-09-04Ultimo aggiornamento:2026-08-30

    Traduci la tua React Router v7 con Intlayer | Internazionalizzazione (i18n)

    Questa guida dimostra come integrare Intlayer per un'internazionalizzazione senza soluzione di continuità nei progetti React Router v7 con routing consapevole della localizzazione, supporto TypeScript e pratiche di sviluppo moderne.

    Questa guida si concentra sul routing frontend. Per il routing con fs-routes, consulta la guida Intlayer with React Router v7 File-System Routes.

    Indice

    Perché Intlayer rispetto alle alternative?

    Rispetto alle soluzioni principali come react-i18next o i18next, Intlayer è una soluzione dotata di ottimizzazioni integrate come:

    Intlayer è ottimizzato per funzionare perfettamente con React Router offrendo routing per locale, middleware per il rilevamento locale e tutte le funzionalità necessarie per scalare l'internazionalizzazione (i18n).

    Invece di caricare enormi file JSON nelle tue pagine, carica solo il contenuto necessario. Intlayer aiuta a ridurre le dimensioni del bundle e della pagina fino al 50%.

    L'ambito del contenuto dell'applicazione facilita la manutenzione per applicazioni su larga scala. Puoi duplicare o eliminare una singola cartella di funzionalità senza l'onere mentale di rivedere l'intera codebase dei contenuti. Inoltre, Intlayer è completamente tipizzato (fully typed) per garantire l'accuratezza dei tuoi contenuti.

    La co-localizzazione dei contenuti riduce il contesto necessario dai Large Language Models (LLM). Intlayer viene fornito anche con una suite di strumenti, come una CLI per verificare le traduzioni mancanti,LSP, MCP e agent skills, per rendere l'esperienza dello sviluppatore (DX) ancora più fluida per gli agenti IA.

    Utilizza l'automazione per tradurre nella tua pipeline CI/CD utilizzando il LLM di tua scelta al costo del tuo provider di intelligenza artificiale. Intlayer offre anche un compilatore per automatizzare l'estrazione dei contenuti, nonché una piattaforma web per aiutare a tradurre in background.

    La connessione di enormi file JSON ai componenti può portare a problemi di prestazioni e reattività. Intlayer ottimizza il caricamento dei contenuti in fase di compilazione.

    Più di una semplice soluzione i18n, Intlayer fornisce un editor visivo self-hosted e un CMS completo per aiutarti gestisci i tuoi contenuti multilingue in tempo reale, semplificando la collaborazione con traduttori, copywriter e altri membri del team. I contenuti possono essere archiviati localmente e/o in remoto.

    Guida passo-passo per configurare Intlayer in un'applicazione React Router v7

    www.youtube.com
    ide.intlayer.org
    ide.intlayer.org
    intlayer-react-router-v7.vercel.app

    See the Config-Based Routing Template or File-System Routes Template on GitHub.

    1. Installare le dipendenze

      Installa i pacchetti necessari usando il tuo gestore di pacchetti preferito:

      bash
      npx intlayer init --interactive
      il flag --interactive è opzionale. Usa intlayer-cli init se sei un agente IA.
      Questo comando rileverà il tuo ambiente e installerà i pacchetti richiesti. Ad esempio:
      bash
      npm install intlayer react-intlayer
npm install vite-intlayer --save-dev

      • intlayer

      • Il pacchetto core che fornisce strumenti di internazionalizzazione per la gestione della configurazione, la traduzione, la dichiarazione dei contenuti, la traspilazione e i comandi CLI.

      • react-intlayer
        Il pacchetto che integra Intlayer con l'applicazione React. Fornisce provider di contesto e hook per l'internazionalizzazione in React.

      • vite-intlayer
        Include il plugin Vite per integrare Intlayer con il bundler Vite, oltre a middleware per rilevare la locale preferita dall'utente, gestire i cookie e gestire il reindirizzamento degli URL.

    2. Configurazione del tuo progetto

      Architettura

      In questa architettura, le route sono definite a livello di codice in app/routes.ts con segmenti dinamici opzionali /:locale?. Le pagine localizzate, i layout e le dichiarazioni di contenuto sono organizzati all'interno della directory app/:

      bash
      .
├── app
│   ├── components
│   │   ├── locale-switcher.content.ts
│   │   ├── locale-switcher.tsx
│   │   ├── localized-link.tsx
│   │   ├── navbar.content.ts
│   │   └── navbar.tsx
│   ├── hooks
│   │   ├── useI18nHTMLAttributes.tsx
│   │   └── useLocalizedNavigate.tsx
│   ├── routes
│   │   ├── about
│   │   │   ├── page.content.ts
│   │   │   └── page.tsx
│   │   ├── layout.tsx
│   │   ├── page.content.ts
│   │   └── page.tsx
│   ├── root.tsx                      # Root layout for IntlayerProvider
│   └── routes.ts                     # Route definition file
├── intlayer.config.ts
├── package.json
├── react-router.config.ts
├── tsconfig.json
└── vite.config.ts

      Configurazione

      Crea un file di configurazione intlayer.config.ts per dichiarare le lingue supportate dalla tua applicazione:

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

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

export default config;

      Architettura

      In questa architettura, le route seguono le convenzioni del file system di React Router v7 utilizzando flatRoutes, dove i punti (.) rappresentano segmenti URL e ($locale) indica il segmento localizzato opzionale:

      bash
      .
├── app
│   ├── components
│   │   ├── locale-switcher.content.ts
│   │   ├── locale-switcher.tsx
│   │   ├── localized-link.tsx
│   │   ├── navbar.content.ts
│   │   └── navbar.tsx
│   ├── hooks
│   │   ├── useI18nHTMLAttributes.tsx
│   │   └── useLocalizedNavigate.tsx
│   ├── routes
│   │   ├── ($locale)._index.content.ts
│   │   ├── ($locale)._index.tsx
│   │   ├── ($locale).about.content.ts
│   │   └── ($locale).about.tsx
│   ├── root.tsx                      # Root layout for IntlayerProvider
│   └── routes.ts                     # Route definition file using flatRoutes
├── intlayer.config.ts
├── package.json
├── react-router.config.ts
├── tsconfig.json
└── vite.config.ts

      Configurazione

      Crea un file di configurazione intlayer.config.ts per dichiarare le lingue supportate dalla tua applicazione:

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

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

export default config;
      Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamenti middleware, nomi dei cookie, la posizione e l'estensione delle dichiarazioni di contenuto, disabilitare i log di Intlayer nella console e altro ancora. Per un elenco completo dei parametri disponibili, consulta la documentazione di configurazione.

    3. Integra Intlayer nella tua configurazione Vite

      Aggiungi il plugin intlayer nella tua configurazione:

      vite.config.ts
      import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

export default defineConfig({
  plugins: [reactRouter(), intlayer()],
});
      Il plugin Vite intlayer() viene utilizzato per integrare Intlayer con Vite. Garantisce la creazione dei file di dichiarazione dei contenuti e li monitora in modalità sviluppo. Definisce le variabili d'ambiente di Intlayer all'interno dell'applicazione Vite. Inoltre, fornisce alias per ottimizzare le prestazioni.

    4. Configurare le rotte di React Router v7

      Configura la tua configurazione di routing con rotte consapevoli della localizzazione:

      app/routes.ts
      import { layout, route, type RouteConfig } from "@react-router/dev/routes";

export default [
  route("/:locale?", "routes/page.tsx"), // Pagina iniziale localizzata
  route("/:locale?/about", "routes/about/page.tsx"), // Pagina "about" localizzata
] satisfies RouteConfig;

      Set up your routing configuration to use file-system based routes with flatRoutes:

      app/routes.ts
      import type { RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";
import { configuration } from "intlayer";

const routes: RouteConfig = flatRoutes({
  // Ignore content declaration files from being treated as routes
  ignoredRouteFiles: configuration.content.fileExtensions.map(
    (fileExtension) => `**/*${fileExtension}`
  ),
});

export default routes;
      The flatRoutes function from @react-router/fs-routes enables file-system based routing, where the file structure in the routes/ directory determines your application's routes. The ignoredRouteFiles option ensures that Intlayer content declaration files (.content.ts, etc.) are not treated as route files.

    5. Crea i Componenti di Layout

      Configura il layout principale e i layout specifici per la localizzazione:

      Layout Principale

      app/root.tsx
      import { getLocaleFromPath } from "intlayer";
import { IntlayerProvider } from "react-intlayer";
import {
  data,
  Meta,
  Scripts,
  ScrollRestoration,
  useLoaderData,
} from "react-router";
import type { Route } from "./+types/root";

// ... Unchanged App, links and ErrorBoundary code

export async function loader({ request }: Route.LoaderArgs) {
  const locale = getLocaleFromPath(request.url);

  if (!locale) {
    throw data("Language not supported", { status: 404 });
  }

  return { locale };
}

export function Layout({
  children,
}: { children: React.ReactNode } & Route.ComponentProps) {
  const data = useLoaderData<typeof loader>();
  const { locale } = data ?? {};

  return (
    <html lang={locale}>
      <head>
        <meta charSet="utf-8" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <Meta />
        <Links />
      </head>
      <body>
        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

    6. Dichiarare il Tuo Contenuto

      Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni:

      app/routes/[lang]/page.content.ts
      import { t, type Dictionary } from "intlayer";

const pageContent = {
  key: "page",
  content: {
    title: t({
      en: "Welcome to React Router v7 + Intlayer",
      es: "Bienvenido a React Router v7 + Intlayer",
      fr: "Bienvenue sur React Router v7 + Intlayer",
    }),
    description: t({
      en: "Build multilingual applications with ease using React Router v7 and Intlayer.",
      es: "Cree aplicaciones multilingües fácilmente usando React Router v7 y Intlayer.",
      fr: "Créez des applications multilingues facilement avec React Router v7 et Intlayer.",
    }),
    aboutLink: t({
      en: "Learn About Us",
      es: "Aprender Sobre Nosotros",
      fr: "En savoir plus sur nous",
    }),
    homeLink: t({
      en: "Home",
      es: "Inicio",
      fr: "Accueil",
    }),
  },
} satisfies Dictionary;

export default pageContent;
      Le tue dichiarazioni di contenuto possono essere definite ovunque nella tua applicazione non appena vengono incluse nella directory contentDir (per default, ./app). E devono corrispondere all'estensione del file di dichiarazione del contenuto (per default, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).
      Could be placed in app/routes/($locale)._index.content.ts in case of using file-system based routing.
      Per maggiori dettagli, consulta la documentazione sulla dichiarazione del contenuto.

    7. Crea Componenti Consapevoli della Locale

      Crea un componente LocalizedLink per una navigazione consapevole della locale:

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

import { getLocalizedUrl, type LocalesValues } from "intlayer";
import { useLocale } from "react-intlayer";
import { Link, type LinkProps, type To } from "react-router";

const isExternalLink = (to: string) => /^(https?:)?\/\//.test(to);

// Funzione per localizzare l'URL in base alla lingua
export const locacalizeTo = (to: To, locale: LocalesValues): To => {
  if (typeof to === "string") {
    if (isExternalLink(to)) {
      return to;
    }

    return getLocalizedUrl(to, locale);
  }

  if (isExternalLink(to.pathname ?? "")) {
    return to;
  }

  return {
    ...to,
    pathname: getLocalizedUrl(to.pathname ?? "", locale),
  };
};

// Componente per link localizzati
export const LocalizedLink: FC<LinkProps> = (props) => {
  const { locale } = useLocale();

  return <Link {...props} to={locacalizeTo(props.to, locale)} />;
};

      Nel caso in cui desideri navigare verso le rotte localizzate, puoi utilizzare l'hook useLocalizedNavigate:

      app/hooks/useLocalizedNavigate.ts
      import { useLocale } from "react-intlayer";
import { type NavigateOptions, type To, useNavigate } from "react-router";

import { locacalizeTo } from "~/components/localized-link";

export const useLocalizedNavigate = () => {
  const navigate = useNavigate();
  const { locale } = useLocale();

  const localizedNavigate = (to: To, options?: NavigateOptions) => {
    const localedTo = locacalizeTo(to, locale);

    navigate(localedTo, options);
  };

  return localizedNavigate;
};

    8. Utilizza Intlayer nelle tue Pagine

      Accedi ai tuoi dizionari di contenuti in tutta l'applicazione:

      Pagina Home Localizzata

      app/routes/page.tsx
      import { getIntlayer, validatePrefix } from "intlayer";
import { useIntlayer } from "react-intlayer";
import { data } from "react-router";

import { LocaleSwitcher } from "~/components/locale-switcher";

import { Navbar } from "~/components/navbar";
import type { Route } from "./+types/page";

export const loader = ({ params }: Route.LoaderArgs) => {
  const { locale } = params;

  const { isValid } = validatePrefix(locale);

  if (!isValid) {
    throw data("Locale not supported", { status: 404 });
  }
};

export const meta: Route.MetaFunction = ({ params }) => {
  const content = getIntlayer("page", params.locale);

  return [
    { title: content.title },
    { content: content.description, name: "description" },
  ];
};

export default function Page() {
  const { title, description, aboutLink } = useIntlayer("page");

  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
      <nav>
        <LocalizedLink to="/about">{aboutLink}</LocalizedLink>
      </nav>
    </div>
  );
}
      app/routes/($locale)._index.tsx
      import { getIntlayer, validatePrefix } from "intlayer";
import { useIntlayer } from "react-intlayer";
import { data } from "react-router";

import { LocaleSwitcher } from "~/components/locale-switcher";

import { Navbar } from "~/components/navbar";
import type { Route } from "./+types/($locale)._index";

export const loader = ({ params }: Route.LoaderArgs) => {
  const { locale } = params;

  const { isValid } = validatePrefix(locale);

  if (!isValid) {
    throw data("Locale not supported", { status: 404 });
  }
};

export const meta: Route.MetaFunction = ({ params }) => {
  const content = getIntlayer("page", params.locale);

  return [
    { title: content.title },
    { content: content.description, name: "description" },
  ];
};

export default function Page() {
  const { title, description, aboutLink } = useIntlayer("page");

  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
      <nav>
        <LocalizedLink to="/about">{aboutLink}</LocalizedLink>
      </nav>
    </div>
  );
}
      Per saperne di più sull'hook useIntlayer, consulta la documentazione.
      Se la tua app esiste già, puoi utilizzare l' Intlayer Compiler in combinazione con il comando extract per convertire migliaia di componenti in un second.

    9. Crea un Componente per il Selettore di Lingua

      Crea un componente per permettere agli utenti di cambiare lingua:

      app/components/locale-switcher.tsx
      import type { FC } from "react";

import {
  getHTMLTextDir,
  getLocaleName,
  getLocalizedUrl,
  getPathWithoutLocale,
  defaultLocale,
} from "intlayer";
import { useIntlayer, useLocale } from "react-intlayer";
import { Link, useLocation } from "react-router";

export const LocaleSwitcher: FC = () => {
  const { localeSwitcherLabel } = useIntlayer("locale-switcher");
  const { pathname } = useLocation();

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

  const pathWithoutLocale = getPathWithoutLocale(pathname);

  return (
    <ol>
      {availableLocales.map((localeItem) => (
        <li key={localeItem}>
          <Link
            aria-current={localeItem === locale ? "page" : undefined}
            aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`}
            onClick={() => setLocale(localeItem)}
            reloadDocument // Reload the page to apply the new locale
            to={getLocalizedUrl(pathWithoutLocale, localeItem)}
          >
            <span>
              {/* Locale - es. FR */}
              {localeItem}
            </span>
            <span>
              {/* Lingua nella propria Locale - es. Français */}
              {getLocaleName(localeItem, locale)}
            </span>
            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
              {/* Lingua nella Locale corrente - es. Francés con la locale corrente impostata su Locales.SPANISH */}
              {getLocaleName(localeItem)}
            </span>
            <span dir="ltr" lang={defaultLocale}>
              {/* Lingua in inglese - es. French */}
              {getLocaleName(localeItem, defaultLocale)}
            </span>
          </Link>
        </li>
      ))}
    </ol>
  );
};
      app/components/locale-switcher.tsx
      import type { FC } from "react";

import {
  getHTMLTextDir,
  getLocaleName,
  getLocalizedUrl,
  getPathWithoutLocale,
  defaultLocale,
} from "intlayer";
import { useIntlayer, useLocale } from "react-intlayer";
import { Link, useLocation } from "react-router";

export const LocaleSwitcher: FC = () => {
  const { localeSwitcherLabel } = useIntlayer("locale-switcher");
  const { pathname } = useLocation();

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

  const pathWithoutLocale = getPathWithoutLocale(pathname);

  return (
    <ol>
      {availableLocales.map((localeItem) => (
        <li key={localeItem}>
          <Link
            aria-current={localeItem === locale ? "page" : undefined}
            aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`}
            onClick={() => setLocale(localeItem)}
            reloadDocument // Reload the page to apply the new locale
            to={getLocalizedUrl(pathWithoutLocale, localeItem)}
          >
            <span>
              {/* Locale - e.g. FR */}
              {localeItem}
            </span>
            <span>
              {/* Language in its own Locale - e.g. Français */}
              {getLocaleName(localeItem, locale)}
            </span>
            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
              {/* Language in current Locale - e.g. Francés with current locale set to Locales.SPANISH */}
              {getLocaleName(localeItem)}
            </span>
            <span dir="ltr" lang={defaultLocale}>
              {/* Language in English - e.g. French */}
              {getLocaleName(localeItem, defaultLocale)}
            </span>
          </Link>
        </li>
      ))}
    </ol>
  );
};
      Per saperne di più sull'hook useLocale, consulta la documentazione.

    10. Aggiungere la gestione degli attributi HTML

      Crea un hook per gestire gli attributi lang e dir dell'HTML:

      app/hooks/useI18nHTMLAttributes.tsx
      import { getHTMLTextDir } from "intlayer";
import { useEffect } from "react";
import { useLocale } from "react-intlayer";

export const useI18nHTMLAttributes = () => {
  const { locale } = useLocale();

  useEffect(() => {
    document.documentElement.lang = locale;
    document.documentElement.dir = getHTMLTextDir(locale);
  }, [locale]);
};

      Quindi usalo nel tuo componente root:

      app/routes/layout.tsx
      import { Outlet } from "react-router";
import { IntlayerProvider } from "react-intlayer";

import { useI18nHTMLAttributes } from "app/hooks/useI18nHTMLAttributes"; // importa il hook

export default function RootLayout() {
  useI18nHTMLAttributes(); // chiama il hook

  return (
    <IntlayerProvider>
      <Outlet />
    </IntlayerProvider>
  );
}

    11. Aggiungi middleware

      Puoi anche utilizzare intlayerProxy per aggiungere il routing lato server alla tua applicazione. Questo plugin rileverà automaticamente la locale corrente in base all'URL e imposterà il cookie della locale appropriato. Se nessuna locale è specificata, il plugin determinerà la locale più appropriata in base alle preferenze linguistiche del browser dell'utente. Se nessuna locale viene rilevata, reindirizzerà alla locale predefinita.

      Nota che per utilizzare intlayerProxy in produzione, devi spostare il pacchetto vite-intlayer da devDependencies a dependencies.
      A partire da Intlayer v9, intlayerProxy() è incluso direttamente nel plugin intlayer() e abilitato per impostazione predefinita tramite l'opzione routing.enableProxy (true per impostazione predefinita). La registrazione separata come mostrato di seguito è ora opzionale — viene mantenuta per la compatibilità con le versioni precedenti e per le configurazioni che devono controllare l'ordine dei plugin. Impostare routing.enableProxy: false per escluderlo. Vedi le note di rilascio v9.
      vite.config.ts
      import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    intlayer({
      proxy: {
        ignore: (req) => req.url?.startsWith("/api"),
      },
    }),
  ],
});

    12. Estrarre il contenuto dei tuoi componenti

      Opzionale

      Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.

      Per facilitare questo processo, Intlayer propone un compilatore / estrattore per trasformare i tuoi componenti ed estrarre il contenuto.

      Per configurarlo, puoi aggiungere una sezione compiler nel tuo file intlayer.config.ts:

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

const config: IntlayerConfig = {
  // ... Resto della tua configurazione
  compiler: {
    /**
     * Indica se il compilatore deve essere abilitato.
     */
    enabled: true,

    /**
     * Definisce il percorso dei file di output
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Indica se i componenti devono essere salvati dopo essere stati trasformati. In questo modo, il compilatore può essere eseguito solo una volta per trasformare l'app e poi rimosso.
     */
    saveComponents: false,

    /**
     * Prefisso chiave dizionario
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

      Esegui l'estrattore per trasformare i tuoi componenti ed estrarre il contenuto

      bash
      npx intlayer extract
      Since v9, the intlayerCompiler is included in the intlayer plugin. So you don't need to add it manually.

      Aggiorna il tuo vite.config.ts per includere il plugin intlayerCompiler:

      vite.config.ts
      import { defineConfig } from "vite";
import { intlayer, intlayerCompiler } from "vite-intlayer";

export default defineConfig({
  plugins: [
    intlayer(),
    intlayerCompiler(), // Adds the compiler plugin
  ],
});
      bash
      npm run build # Oppure npm run dev

    Configure TypeScript

    Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.

    Ensure your TypeScript configuration includes the autogenerated types:

    tsconfig.json
    {
  // ... your existing configurations
  include: [
    // ... 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
    # Ignora i file generati da 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 externalize your content using the CMS.

    Riferimenti alla Documentazione

    Questa guida completa fornisce tutto il necessario per integrare Intlayer con React Router v7 per un'applicazione completamente internazionalizzata con routing consapevole della localizzazione e supporto TypeScript.

    Domande frequenti

    React Router v7 non include alcun livello di messaggi, quindi lo abbini a una libreria i18n:

    • react-i18next / i18next: namespace JSON caricati a runtime, con un rilevatore di locale separato da collegare al router.
    • react-intl e Lingui: messaggi ICU con un passaggio di estrazione.
    • Intlayer: contenuto dichiarato accanto a ogni componente, compilato in fase di build, tipizzato end-to-end, con helper di routing consapevoli delle locale, traduzione AI, un editor visivo e un CMS.

    Vedi perché Intlayer e il benchmark.

    Molto meno di una configurazione basata su namespace, perché una pagina non scarica mai un catalogo che non renderizza. Il markup renderizzato lato server risolve i suoi contenuti sul server, e il compilatore in fase di build sostituisce le chiamate useIntlayer con le esatte voci del dizionario che un componente utilizza, quindi le chiavi e le lingue non utilizzate vengono eliminate, e i dizionari dinamici suddividono il resto per locale. Misurato rispetto alle alternative abituali, Intlayer riduce la dimensione del bundle e delle pagine fino al 50%. Vedi ottimizzazione del bundle e il benchmark.

    Sì, e ci sono due percorsi. Puoi migrare il contenuto progressivamente con la guida alla migrazione da react-i18next o la guida alla migrazione da i18next. Oppure puoi mantenere interamente la tua API attuale: gli adattatori di compatibilità espongono esattamente la stessa API di react-i18next, react-intl e i18next, ma servita dai dizionari Intlayer, quindi cambiano gli import e il codice dei componenti no.

    Sì. Il plugin di sincronizzazione JSON mantiene i tuoi file /messages/{locale}/{namespace}.json come fonte di verità e genera dizionari Intlayer da essi, in entrambe le direzioni. Un plugin di sincronizzazione PO fa lo stesso per i cataloghi gettext, e i file per locale ti permettono di dividere il contenuto per lingua invece di raggruppare i locale in un unico file.

    No. Esegui npx intlayer extract e Intlayer legge i tuoi componenti, estrae le stringhe visibili all'utente e scrive un file .content accanto a ciascuno, così puoi rivedere un diff invece di copiare le stringhe in un catalogo una alla volta. Il passo 12 di questa guida lo illustra.

    Per una pipeline completamente automatizzata, il Compilatore Intlayer fa lo stesso in fase di build: analizza il tuo codice sorgente JSX, TSX, Vue e Svelte ad ogni modifica, genera i dizionari e li mantiene sincronizzati attraverso l'hot module replacement, così non ci sono affatto chiavi da mantenere a mano.

    Due limiti vale la pena conoscere prima di attivare il compilatore. Funziona per analisi statica, quindi le stringhe che esistono solo a runtime, come i codici di errore delle API o i campi del CMS, restano fuori portata. E deve distinguere il testo visibile all'utente dalla logica applicativa come className="active" o un codice di stato, il che richiede alcune annotazioni in una codebase estesa. Il comando extract evita entrambi mantenendoti nel ciclo.

    Cinque componenti, tutti opzionali:

    • Estensione VS Code: salta da una chiave useIntlayer al file di contenuto che la dichiara, estrai il contenuto da un componente ed esegui build, fill, test, push e pull dalla palette dei comandi o da una scheda Intlayer dedicata.
    • Server LSP: la stessa consapevolezza in qualsiasi editor che parla LSP, con vai alla definizione, trova tutti i riferimenti, anteprime al passaggio del mouse di un valore tradotto, autocompletamento di chiavi e campi, e un avviso quando una chiave non è dichiarata da nessuna parte. Risolve anche le chiamate i18next, react-i18next, next-intl e use-intl, il che aiuta durante la migrazione.
    • Server MCP: espone la documentazione di Intlayer e la CLI a Cursor, VS Code, Claude Desktop, Claude Code e ChatGPT, così un assistente risponde in base alla documentazione aggiornata invece di tirare a indovinare, e può eseguire da solo comandi come intlayer fill.
    • Agent skills: competenze mirate come intlayer-config, intlayer-cli e intlayer-content, più una per framework, che insegnano a un agente la tua configurazione di routing e i tipi di nodo dei contenuti.
    • Plugin ESLint: no-raw-text segnala le stringhe hardcoded, con ulteriori regole per le chiavi statiche dei dizionari e i contenuti non utilizzati.
    Vite e ReactVite e Vue