Creation:2025-04-18Last update:2026-05-31

    Traduire votre Vite et Preact avec Intlayer | Internationalisation (i18n)

    www.youtube.com
    Ce package est en cours de développement. Consultez le problème pour plus d'informations. Montrez votre intérêt pour Intlayer avec Preact en aimant ce problème.

    Voir le Modèle d'application sur GitHub.

    Pourquoi Intlayer plutôt que des alternatives ?

    Par rapport aux solutions principales telles que preact-i18n ou i18next, Intlayer est une solution dotée d'optimisations intégrées telles que :

    Intlayer est optimisé pour fonctionner parfaitement avec Preact en offrant une portée du contenu au niveau des composants, des traductions à chargement dynamique (lazy-loading) et toutes les fonctionnalités nécessaires à la mise à l'échelle de l'internationalisation (i18n).

    Au lieu de charger de lourds fichiers JSON dans vos pages, ne chargez que le contenu strictement nécessaire. Intlayer vous aide à réduire la taille de votre bundle et de vos pages jusqu'à 50 %.

    Déclarer le contenu directement au plus près de vos composants facilite la maintenance des applications de grande envergure. Vous pouvez dupliquer ou supprimer le dossier d'une fonctionnalité sans le fardeau mental de devoir passer en revue toute votre base de code de contenu. De plus, Intlayer est entièrement typé pour garantir l'exactitude de vos traductions.

    La colocalisation du contenu réduit le contexte nécessaire aux grands modèles de langage (LLM). Intlayer est également livré avec une suite d'outils, tels qu'une CLI pour vérifier les traductions manquantes, un LSP, un MCP et des agent skills, afin de rendre l'expérience développeur (DX) encore plus fluide pour les agents IA.

    Automatisez les traductions dans votre pipeline CI/CD en utilisant le LLM de votre choix au coût de votre propre fournisseur d'IA. Intlayer propose également un compilateur pour automatiser l'extraction de contenu, ainsi qu'une plateforme web pour vous aider à traduire en arrière-plan.

    Associer de gros fichiers JSON à vos composants peut ralentir les performances et impacter la réactivité. Intlayer optimise le chargement du contenu directement au moment du build.

    Bien plus qu'une simple solution i18n, Intlayer propose un éditeur visuel auto-hébergé et un CMS complet pour gérer votre contenu multilingue en temps réel. Cela rend la collaboration avec les traducteurs, concepteurs-rédacteurs et autres membres de l'équipe extrêmement simple. Le contenu peut être stocké localement et/ou à distance.

    Guide étape par étape pour configurer Intlayer dans une application Vite et Preact

    1. Installer les dépendances

      Installez les paquets nécessaires avec npm :

      bash
      npm install intlayer preact-intlayernpm install vite-intlayer --save-devnpx intlayer init

      • intlayer

        Le paquet principal qui fournit des outils d'internationalisation pour la gestion de la configuration, la traduction, la déclaration de contenu, la transpilation, et les commandes CLI.

      • preact-intlayer Le paquet qui intègre Intlayer avec une application Preact. Il fournit des fournisseurs de contexte et des hooks pour l'internationalisation avec Preact.

      • vite-intlayer Inclut le plugin Vite pour intégrer Intlayer avec le bundler Vite, ainsi qu'un middleware pour détecter la langue préférée de l'utilisateur, gérer les cookies, et gérer la redirection des URL.

    2. Configuration de votre projet

      Créez un fichier de configuration pour configurer les langues de votre application :

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

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Vos autres langues
    ],
    defaultLocale: Locales.ENGLISH,
  },
  routing: {
    mode: "prefix-no-default", // Par défaut : préfixe toutes les locales sauf la locale par défaut
    storage: ["cookie", "header"], // Par défaut : stocker la locale dans un cookie et détecter via l'en-tête
  },
};

export default config;
      Grâce à ce fichier de configuration, vous pouvez configurer des URL localisées, les modes de routage, les options de stockage, les noms des cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les logs Intlayer dans la console, et bien plus encore. Pour une liste complète des paramètres disponibles, consultez la documentation de configuration.

    3. Intégrer Intlayer dans votre configuration Vite

      Ajoutez le plugin intlayer dans votre configuration.

      vite.config.ts
      import { defineConfig } from "vite";
import preact from "@preact/preset-vite";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact(), intlayer()],
});
      Le plugin Vite intlayer() est utilisé pour intégrer Intlayer avec Vite. Il assure la génération des fichiers de déclaration de contenu et les surveille en mode développement. Il définit les variables d'environnement Intlayer au sein de l'application Vite. De plus, il fournit des alias pour optimiser les performances.

    4. Déclarez Votre Contenu

      Créez et gérez vos déclarations de contenu pour stocker les traductions :

      src/app.content.tsx
      import { t, type Dictionary } from "intlayer";
import type { ComponentChildren } from "preact";

const appContent = {
  key: "app",
  content: {
    viteLogo: t({
      en: "Vite logo",
      fr: "Logo Vite",
      es: "Logo Vite",
    }),
    preactLogo: t({
      en: "Preact logo",
      fr: "Logo Preact",
      es: "Logo Preact",
    }),

    title: "Vite + Preact",

    count: t({
      en: "count is ",
      fr: "le compte est ",
      es: "el recuento es ",
    }),

    edit: t<ComponentChildren>({
      en: (
        <>
          Éditez <code>src/app.tsx</code> et enregistrez pour tester HMR
        </>
      ),
      fr: (
        <>
          Éditez <code>src/app.tsx</code> et enregistrez pour tester HMR
        </>
      ),
      es: (
        <>
          Edita <code>src/app.tsx</code> y guarda para probar HMR
        </>
      ),
    }),

    readTheDocs: t({
      en: "Cliquez sur les logos Vite et Preact pour en savoir plus",
      fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
      es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
    }),
  },
} satisfies Dictionary;

export default appContent;
      Vos déclarations de contenu peuvent être définies n'importe où dans votre application dès qu'elles sont incluses dans le répertoire contentDir (par défaut, ./src). Et correspondent à l'extension de fichier de déclaration de contenu (par défaut, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).
      Pour plus de détails, consultez la documentation sur la déclaration de contenu.
      Si votre fichier de contenu inclut du code TSX, vous devrez peut-être importer import { h } from "preact"; ou vous assurer que votre pragma JSX est correctement configuré pour Preact.

    5. Utiliser Intlayer dans votre code

      Accédez à vos dictionnaires de contenu dans toute votre application :

      src/app.tsx
      import { useState } from "preact/hooks";
import type { FunctionalComponent } from "preact";
import preactLogo from "./assets/preact.svg"; // En supposant que vous avez un preact.svg
import viteLogo from "/vite.svg";
import "./app.css"; // En supposant que votre fichier CSS s'appelle app.css
import { IntlayerProvider, useIntlayer } from "preact-intlayer";

const AppContent: FunctionalComponent = () => {
  const [count, setCount] = useState(0);
  const content = useIntlayer("app");

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} class="logo" alt={content.viteLogo.value} />
        </a>
        <a href="https://preactjs.com" target="_blank">
          <img
            src={preactLogo}
            class="logo preact"
            alt={content.preactLogo.value}
          />
        </a>
      </div>
      <h1>{content.title}</h1>
      <div class="card">
        <button onClick={() => setCount((count) => count + 1)}>
          {content.count}
          {count}
        </button>
        <p>{content.edit}</p>
      </div>
      {/* Contenu Markdown */}
      <div>{content.myMarkdownContent}</div>

      {/* Contenu HTML */}
      <div>{content.myHtmlContent}</div>

      <p class="read-the-docs">{content.readTheDocs}</p>
    </>
  );
};

const App: FunctionalComponent = () => (
  <IntlayerProvider>
    <AppContent />
  </IntlayerProvider>
);

export default App;
      Si vous souhaitez utiliser votre contenu dans un attribut string, tel que alt, title, href, aria-label, etc., vous devez appeler la valeur de la fonction, comme ceci :
      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)}" />
      Remarque : Dans Preact, className s'écrit généralement class.
      Pour en savoir plus sur le hook useIntlayer, consultez la documentation (L'API est similaire pour preact-intlayer).
      Si votre application existe déjà, vous pouvez utiliser le Compilateur Intlayer, ainsi que la commande d'extraction, pour transformer des milliers de composants en une seconde.

    6. Changer la langue de votre contenu

      Facultatif

      Pour changer la langue de votre contenu, vous pouvez utiliser la fonction setLocale fournie par le hook useLocale. Cette fonction vous permet de définir la locale de l'application et de mettre à jour le contenu en conséquence.

      src/components/LocaleSwitcher.tsx
      import type { FunctionalComponent } from "preact";
import { Locales } from "intlayer";
import { useLocale } from "preact-intlayer";

const LocaleSwitcher: FunctionalComponent = () => {
  const { setLocale } = useLocale();

  return (
    <button onClick={() => setLocale(Locales.ENGLISH)}>
      Changer la langue en anglais
    </button>
  );
};

export default LocaleSwitcher;
      Pour en savoir plus sur le hook useLocale, consultez la documentation (L'API est similaire pour preact-intlayer).

    7. Ajouter un routage localisé à votre application

      Facultatif

      L'objectif de cette étape est de créer des routes uniques pour chaque langue. Ceci est utile pour le SEO et les URL conviviales. Exemple :

      plaintext
      - https://example.com/about- https://example.com/es/about- https://example.com/fr/about
      Par défaut, les routes ne sont pas préfixées pour la langue par défaut. Si vous souhaitez préfixer la langue par défaut, vous pouvez définir l'option routing.mode sur "prefix-all" dans votre configuration. Voir la documentation de configuration pour plus d'informations.

      Pour ajouter un routage localisé à votre application, vous pouvez créer un composant LocaleRouter qui enveloppe les routes de votre application et gère le routage basé sur la langue. Voici un exemple utilisant preact-iso :

      src/components/LocaleRouter.tsx
      import { localeMap } from "intlayer";
import { IntlayerProvider } from "preact-intlayer";
import { LocationProvider, Router, Route } from "preact-iso";
import type { ComponentChildren, FunctionalComponent } from "preact";

/**
 * Un composant de routeur qui configure des routes spécifiques à la langue.
 * Il utilise preact-iso pour gérer la navigation et afficher des composants localisés.
 */
export const LocaleRouter: FunctionalComponent<{
  children: ComponentChildren;
}> = ({ children }) => (
  <LocationProvider>
    <Router>
      {localeMap(({ locale, urlPrefix }) => ({ locale, urlPrefix }))
        .sort((a, b) => b.urlPrefix.length - a.urlPrefix.length)
        .map(({ locale, urlPrefix }) => (
          <Route
            key={locale}
            path={`${urlPrefix}/:rest*`}
            component={() => (
              <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
            )}
          />
        ))}
    </Router>
  </LocationProvider>
);

      Ensuite, vous pouvez utiliser le composant LocaleRouter dans votre application :

      src/app.tsx
      import { LocaleRouter } from "./components/LocaleRouter";
import type { FunctionalComponent } from "preact";

// ... Votre composant AppContent

const App: FunctionalComponent = () => (
  <LocaleRouter>
    <AppContent />
  </LocaleRouter>
);

export default App;

    8. Changer l'URL lorsque la langue change

      Facultatif

      Pour changer l'URL lorsque la langue change, vous pouvez utiliser la propriété onLocaleChange fournie par le hook useLocale. En parallèle, vous pouvez utiliser la méthode route de useLocation de preact-iso pour mettre à jour le chemin de l'URL.

      src/components/LocaleSwitcher.tsx
      import { useLocation } from "preact-iso";
import {
  Locales,
  getHTMLTextDir,
  getLocaleName,
  getLocalizedUrl,
} from "intlayer";
import { useLocale } from "preact-intlayer";
import type { FunctionalComponent } from "preact";

const LocaleSwitcher: FunctionalComponent = () => {
  const { url, route } = useLocation();
  const { locale, availableLocales, setLocale } = useLocale({
    onLocaleChange: (newLocale) => {
      // Construire l'URL avec la langue mise à jour
      // Exemple : /es/about?foo=bar
      const pathWithLocale = getLocalizedUrl(url, newLocale);

      // Mettre à jour le chemin de l'URL
      route(pathWithLocale, true); // true pour remplacer
    },
  });

  return (
    <div>
      <button popovertarget="localePopover">{getLocaleName(locale)}</button>
      <div id="localePopover" popover="auto">
        {availableLocales.map((localeItem) => (
          <a
            href={getLocalizedUrl(url, localeItem)}
            hreflang={localeItem}
            aria-current={locale === localeItem ? "page" : undefined}
            onClick={(e) => {
              e.preventDefault();
              setLocale(localeItem);
              // La navigation programmatique après le changement de langue sera gérée par onLocaleChange
            }}
            key={localeItem}
          >
            <span>
              {/* Locale - ex. FR */}
              {localeItem}
            </span>
            <span>
              {/* Langue dans sa propre langue - ex. Français */}
              {getLocaleName(localeItem, localeItem)}
            </span>
            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
              {/* Langue dans la langue actuelle - ex. Francés avec la langue actuelle définie sur Locales.SPANISH */}
              {getLocaleName(localeItem, locale)}
            </span>
            <span dir="ltr" lang={Locales.ENGLISH}>
              {/* Langue en anglais - ex. French */}
              {getLocaleName(localeItem, Locales.ENGLISH)}
            </span>
          </a>
        ))}
      </div>
    </div>
  );
};

export default LocaleSwitcher;

      Références de la documentation :

      - Hook useLocale (l'API est similaire pour preact-intlayer)> - Hook getLocaleName> - Hook getLocalizedUrl> - Hook getHTMLTextDir> - Attribut hreflang> - Attribut lang> - Attribut dir> - Attribut aria-current> - API Popover

    9. Modifier les attributs de langue et de direction du HTML

      Facultatif

      Lorsque votre application prend en charge plusieurs langues, il est crucial de mettre à jour les attributs lang et dir de la balise <html> pour qu'ils correspondent à la langue actuelle. Cela garantit :

      • Accessibilité : Les lecteurs d'écran et les technologies d'assistance s'appuient sur l'attribut lang correct pour prononcer et interpréter le contenu avec précision.
      • Rendu du texte : L'attribut dir (direction) garantit que le texte est rendu dans le bon ordre (par exemple, de gauche à droite pour l'anglais, de droite à gauche pour l'arabe ou l'hébreu), ce qui est essentiel pour la lisibilité.
      • SEO : Les moteurs de recherche utilisent l'attribut lang pour déterminer la langue de votre page, ce qui aide à servir le bon contenu localisé dans les résultats de recherche.

      En mettant à jour ces attributs dynamiquement lorsque la langue change, vous garantissez une expérience cohérente et accessible pour les utilisateurs dans toutes les langues prises en charge.

      Implémentation du Hook

      Créez un hook personnalisé pour gérer les attributs HTML. Le hook écoute les changements de langue et met à jour les attributs en conséquence :

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

/**
 * Met à jour les attributs `lang` et `dir` de l'élément HTML <html> en fonction de la langue actuelle.
 * - `lang` : Informe les navigateurs et les moteurs de recherche de la langue de la page.
 * - `dir` : Assure l'ordre de lecture correct (par exemple, 'ltr' pour l'anglais, 'rtl' pour l'arabe).
 *
 * Cette mise à jour dynamique est essentielle pour le rendu correct du texte, l'accessibilité et le SEO.
 */
export const useI18nHTMLAttributes = () => {
  const { locale } = useLocale();

  useEffect(() => {
    // Mettre à jour l'attribut de langue avec la langue actuelle.
    document.documentElement.lang = locale;

    // Définir la direction du texte en fonction de la langue actuelle.
    document.documentElement.dir = getHTMLTextDir(locale);
  }, [locale]);
};

      Utilisation du Hook dans Votre Application

      Intégrez le hook dans votre composant principal afin que les attributs HTML se mettent à jour chaque fois que la langue change :

      src/app.tsx
      import type { FunctionalComponent } from "preact";
import { IntlayerProvider } from "preact-intlayer"; // useIntlayer déjà importé si AppContent en a besoin
import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
import "./app.css";
// Définition de AppContent depuis l'étape 5

const AppWithHooks: FunctionalComponent = () => {
  // Appliquer le hook pour mettre à jour les attributs lang et dir de la balise <html> en fonction de la langue.
  useI18nHTMLAttributes();

  // En supposant que AppContent est votre composant principal d'affichage de contenu de l'étape 5
  return <AppContent />;
};

const App: FunctionalComponent = () => (
  <IntlayerProvider>
    <AppWithHooks />
  </IntlayerProvider>
);

export default App;

    10. Création d'un Composant de Lien Localisé

      Facultatif

      Pour s'assurer que la navigation de votre application respecte la langue actuelle, vous pouvez créer un composant Link personnalisé. Ce composant préfixe automatiquement les URL internes avec la langue actuelle.

      Ce comportement est utile pour plusieurs raisons :

      • SEO et Expérience Utilisateur : Les URL localisées aident les moteurs de recherche à indexer correctement les pages spécifiques à une langue et fournissent aux utilisateurs du contenu dans leur langue préférée.
      • Cohérence : En utilisant un lien localisé dans toute votre application, vous garantissez que la navigation reste dans la langue actuelle, évitant ainsi des changements de langue inattendus.
      • Maintenabilité : Centraliser la logique de localisation dans un seul composant simplifie la gestion des URL.

      Voici l'implémentation d'un composant Link localisé dans Preact :

      src/components/Link.tsx
      import { getLocalizedUrl } from "intlayer";
import { useLocale } from "preact-intlayer";
import { forwardRef } from "preact/compat";
import type { JSX } from "preact";

export interface LinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
  href: string;
}

/**
 * Fonction utilitaire pour vérifier si une URL donnée est externe.
 * Si l'URL commence par http:// or https://, elle est considérée comme externe.
 */
export const checkIsExternalLink = (href?: string): boolean =>
  /^https?:\/\//.test(href ?? "");

/**
 * Un composant Link personnalisé qui adapte l'attribut href en fonction de la langue actuelle.
 * Pour les liens internes, il utilise `getLocalizedUrl` pour préfixer l'URL avec la langue (ex: /fr/about).
 * Cela garantit que la navigation reste dans le même contexte de langue.
 */
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
  ({ href, children, ...props }, ref) => {
    const { locale } = useLocale();
    const isExternalLink = checkIsExternalLink(href);

    // Si le lien est interne et qu'un href valide est fourni, obtenir l'URL localisée.
    const hrefI18n =
      href && !isExternalLink ? getLocalizedUrl(href, locale) : href;

    return (
      <a href={hrefI18n} ref={ref} {...props}>
        {children}
      </a>
    );
  }
);

Link.displayName = "Link";

      Comment ça fonctionne

      • Détection des Liens Externes :
        La fonction utilitaire checkIsExternalLink détermine si une URL est externe. Les liens externes sont laissés inchangés car ils n'ont pas besoin de localisation.
      • Récupération de la Langue Actuelle :
        Le hook useLocale fournit la langue actuelle (ex : fr pour le français).
      • Localisation de l'URL :
        Pour les liens internes (c'est-à-dire non externes), getLocalizedUrl est utilisé pour préfixer automatiquement l'URL avec la langue actuelle. Cela signifie que si votre utilisateur est en français, passer /about comme href le transformera en /fr/about.
      • Retour du Lien :
        Le composant retourne un élément <a> avec l'URL localisée, garantissant que la navigation est cohérente avec la langue.

    11. Rendre le Markdown et l'HTML

      Facultatif

      Intlayer prend en charge le rendu du contenu Markdown et HTML dans Preact.

      Vous pouvez personnaliser le rendu du contenu Markdown et HTML en utilisant la méthode .use(). Cette méthode vous permet de surcharger le rendu par défaut de balises spécifiques.

      tsx
      import { useIntlayer } from "preact-intlayer";const { myMarkdownContent, myHtmlContent } = useIntlayer("my-component");// ...return (  <div>    {/* Rendu de base */}    {myMarkdownContent}    {/* Rendu personnalisé pour le Markdown */}    {myMarkdownContent.use({      h1: (props) => <h1 style={{ color: "red" }} {...props} />,    })}    {/* Rendu de base pour l'HTML */}    {myHtmlContent}    {/* Rendu personnalisé pour l'HTML */}    {myHtmlContent.use({      b: (props) => <strong style={{ color: "blue" }} {...props} />,    })}  </div>);

    12. Extraire le contenu de vos composants

      Facultatif

      Si vous avez une base de code existante, transformer des milliers de fichiers peut prendre beaucoup de temps.

      Pour faciliter ce processus, Intlayer propose un compilateur / extracteur pour transformer vos composants et extraire le contenu.

      Pour le configurer, vous pouvez ajouter une section compiler dans votre fichier intlayer.config.ts :

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

const config: IntlayerConfig = {
  // ... Reste de votre configuration
  compiler: {
    /**
     * Indique si le compilateur doit être activé.
     */
    enabled: true,

    /**
     * Définit le chemin des fichiers de sortie
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Indique si les composants doivent être sauvegardés après avoir été transformés. De cette façon, le compilateur peut être exécuté une seule fois pour transformer l'application, puis il peut être supprimé.
     */
    saveComponents: false,

    /**
     * Préfixe de clé de dictionnaire
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

      Exécutez l'extracteur pour transformer vos composants et extraire le contenu

      bash
      npx intlayer extract

    (Facultatif) Sitemap et robots.txt (génération au build)

    Intlayer fournit des utilitaires - generateSitemap et getMultilingualUrls - pour produire un sitemap.xml multilingue et un robots.txt prêts pour les crawlers, que vous pouvez écrire automatiquement dans public/. En pratique, exécutez un petit script Node avant Vite (par exemple les hooks npm predev / prebuild) afin que ces fichiers soient présents au build ou au serveur de développement.

    Sitemap

    Le générateur de sitemap Intlayer tient compte de vos locales et ajoute les métadonnées attendues par les moteurs.

    Le sitemap généré prend en charge l’espace de noms xhtml:link (extensions hreflang). Contrairement aux générateurs qui ne listent que des URL brutes, Intlayer relie de façon bidirectionnelle toutes les versions linguistiques d’une même page (par ex. /about, /fr/about ou /about?lang=fr selon votre mode de routage), ce qui aide les crawlers.

    Robots.txt

    Utilisez getMultilingualUrls pour que les règles Disallow couvrent toutes les variantes localisées des chemins sensibles.

    1. Créer generate-seo.mjs à la racine du projet

    generate-seo.mjs
    import fs from "fs";import path from "path";import { fileURLToPath } from "url";import { generateSitemap, getMultilingualUrls } from "intlayer";const __dirname = path.dirname(fileURLToPath(import.meta.url));const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(  /\/$/,  "");const pathList = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);const getAllMultilingualUrls = (urls) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);const robotsTxt = [  "User-agent: *",  "Allow: /",  ...disallowedPaths.map((path) => `Disallow: ${path}`),  "",  `Sitemap: ${SITE_URL}/sitemap.xml`,].join("\n");fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);console.log("SEO files generated successfully.");

    Le paquet intlayer doit être installé pour que le script puisse l’importer. Définissez SITE_URL dans l’environnement pour la production (par ex. en CI).

    Préférez generate-seo.mjs pour l’ESM Node. Avec generate-seo.js, assurez-vous que "type": "module" est présent dans package.json, ou activez l’ESM côté Node.

    2. Lancer le script avant Vite

    package.json
    {  "scripts": {    "dev": "vite",    "prebuild": "node generate-seo.mjs",    "build": "vite build",    "preview": "vite preview"  }}

    Adaptez les commandes si vous utilisez pnpm ou yarn. Vous pouvez aussi appeler ce script depuis la CI ou une autre étape de votre pipeline.

    Configurer TypeScript

    Intlayer utilise l'augmentation de module pour tirer parti de TypeScript et renforcer votre base de code.

    Autocomplétion

    Erreur de traduction

    Assurez-vous que votre configuration TypeScript inclut les types générés automatiquement.

    tsconfig.json
    {  // ... Vos configurations TypeScript existantes  "compilerOptions": {    // ...    "jsx": "react-jsx",    "jsxImportSource": "preact", // Recommandé pour Preact 10+    // ...  },  "include": [    // ... Vos configurations TypeScript existantes    ".intlayer/**/*.ts", // Inclure les types générés automatiquement  ],}
    Assurez-vous que votre tsconfig.json est configuré pour Preact, en particulier les options jsx et jsxImportSource ou jsxFactory/jsxFragmentFactory pour les versions plus anciennes de Preact si vous n'utilisez pas les valeurs par défaut de preset-vite.

    Configuration Git

    Il est recommandé d'ignorer les fichiers générés par Intlayer. Cela vous permet d'éviter de les commettre dans votre dépôt Git.

    Pour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier .gitignore :

    bash
    #  Ignorer les fichiers générés par Intlayer.intlayer

    Extension VS Code

    Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l'extension officielle Intlayer pour VS Code.

    Installer depuis le Marketplace VS Code

    Cette extension offre :

    • Autocomplétion pour les clés de traduction.
    • Détection d'erreurs en temps réel pour les traductions manquantes.
    • Aperçus en ligne du contenu traduit.
    • Actions rapides pour créer et mettre à jour facilement les traductions.

    Pour plus de détails sur l'utilisation de l'extension, consultez la documentation de l'extension Intlayer pour VS Code.

    Aller plus loin

    Pour aller plus loin, vous pouvez implémenter l'éditeur visuel ou externaliser votre contenu en utilisant le CMS.

    SvelteKit
    Vite et Vanilla JS