Übersetzen Sie Ihre React Router v7-Website mit Intlayer | Internationalisierung (i18n)

Diese Anleitung zeigt, wie Sie Intlayer für nahtlose Internationalisierung in React Router v7-Projekten mit lokalisierungsbewusstem Routing, TypeScript-Unterstützung und modernen Entwicklungsmethoden integrieren.

Es umfasst sowohl konfigurationsbasiertes Routing (routes.ts) als auch dateisystembasiertes Routing (@react-router/fs-routes).

Inhaltsverzeichnis

Warum Intlayer gegenüber Alternativen?

Im Vergleich zu Hauptlösungen wie react-i18next oder i18next ist Intlayer eine Lösung, die über integrierte Optimierungen verfügt wie:

Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer React Router v7-Anwendung

VideoCode (konfigurationsbasiert)Code (Dateisystem-Routen)Demo (konfigurationsbasiert)

www.youtube.com

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

intlayer-react-router-v7.vercel.app

Open embedded page in fullscreen

Siehe das Konfigurationsbasierte Routing-Template oder das Dateisystem-Routen-Template auf GitHub.

1. 1

   Abhängigkeiten installieren

   Installieren Sie die notwendigen Pakete mit Ihrem bevorzugten Paketmanager:

   bash

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   npx intlayer init --interactive
   

   Das Flag --interactive ist optional. Verwenden Sie intlayer-cli init, wenn Sie ein KI-Agent sind.

   Dieser Befehl erkennt Ihre Umgebung und installiert die erforderlichen Pakete. Zum Beispiel:

   bash

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   npm install intlayer react-intlayer
   npm install vite-intlayer --save-dev
   

   • intlayer

     Das Kernpaket, das Internationalisierungswerkzeuge für Konfigurationsmanagement, Übersetzung, Inhaltsdeklaration, Transpilierung und CLI-Befehle bereitstellt.

   • react-intlayer Das Paket, das Intlayer in React-Anwendungen integriert. Es stellt Kontext-Provider und Hooks für die Internationalisierung in React bereit.

   • vite-intlayer Enthält das Vite-Plugin zur Integration von Intlayer mit dem Vite-Bundler sowie Middleware zur Erkennung der bevorzugten Sprache des Benutzers, Verwaltung von Cookies und Handhabung von URL-Weiterleitungen.

2. 2

   Konfiguration Ihres Projekts

   Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu konfigurieren:

   intlayer.config.ts

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   import { type IntlayerConfig, Locales } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       defaultLocale: Locales.ENGLISH,
       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
     },
   };
   
   export default config;
   

   Über diese Konfigurationsdatei können Sie lokalisierte URLs, Middleware-Weiterleitungen, Cookie-Namen, den Speicherort und die Erweiterung Ihrer Inhaltsdeklarationen einstellen, Intlayer-Logs in der Konsole deaktivieren und vieles mehr. Für eine vollständige Liste der verfügbaren Parameter lesen Sie bitte die Konfigurationsdokumentation.

3. 3

   Integrieren Sie Intlayer in Ihre Vite-Konfiguration

   Fügen Sie das Intlayer-Plugin in Ihre Konfiguration ein:

   vite.config.ts

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   import { reactRouter } from "@react-router/dev/vite";
   import { defineConfig } from "vite";
   import { intlayer } from "vite-intlayer";
   
   export default defineConfig({
     plugins: [reactRouter(), intlayer()],
   });
   

   Das intlayer() Vite-Plugin wird verwendet, um Intlayer mit Vite zu integrieren. Es sorgt für den Aufbau der Inhaltsdeklarationsdateien und überwacht diese im Entwicklungsmodus. Es definiert Intlayer-Umgebungsvariablen innerhalb der Vite-Anwendung. Zusätzlich stellt es Aliase bereit, um die Leistung zu optimieren.

4. 4

   Konfigurieren der React Router v7 Routen

   Config-basiertes RoutingFile-system-Routes

   Richten Sie Ihre Routing-Konfiguration mit sprachsensitiven Routen ein:

   app/routes.ts

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   import { layout, route, type RouteConfig } from "@react-router/dev/routes";
   
   export default [
     route("/:locale?", "routes/page.tsx"), // Lokalisierte Startseite
     route("/:locale?/about", "routes/about/page.tsx"), // Lokalisierte Über-Seite
   ] satisfies RouteConfig;
   

   Richten Sie Ihre Routing-Konfiguration so ein, dass dateisystembasierte Routen mit flatRoutes verwendet werden:

   app/routes.ts

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   import type { RouteConfig } from "@react-router/dev/routes";
   import { flatRoutes } from "@react-router/fs-routes";
   import { configuration } from "intlayer";
   
   const routes: RouteConfig = flatRoutes({
     // Ignorieren Sie Inhaltsdeklarationsdateien, damit sie nicht als Routen behandelt werden
     ignoredRouteFiles: configuration.content.fileExtensions.map(
       (fileExtension) => `**/*${fileExtension}`
     ),
   });
   
   export default routes;
   

   Die Funktion flatRoutes von @react-router/fs-routes ermöglicht dateisystembasiertes Routing, bei dem die Dateistruktur im Verzeichnis routes/ die Routen Ihrer Anwendung bestimmt. Die Option ignoredRouteFiles stellt sicher, dass Intlayer-Inhaltsdeklarationsdateien (.content.ts usw.) nicht als Routendateien behandelt werden.

5. 5

   Layout-Komponenten erstellen

   Richten Sie Ihr Root-Layout und sprachspezifische Layouts ein:

   Root-Layout

   app/root.tsx

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   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. 6

   Deklarieren Sie Ihre Inhalte

   Erstellen und verwalten Sie Ihre Inhaltsdeklarationen, um Übersetzungen zu speichern:

   app/routes/page.content.ts

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   import { t, type Dictionary } from "intlayer";
   
   const pageContent = {
     key: "page",
     content: {
       title: t({
         de: "Willkommen bei React Router v7 + Intlayer",
         en: "Welcome to React Router v7 + Intlayer",
         es: "Bienvenido a React Router v7 + Intlayer",
         fr: "Bienvenue sur React Router v7 + Intlayer",
       }),
       description: t({
         de: "Erstellen Sie mit React Router v7 und Intlayer ganz einfach mehrsprachige Anwendungen.",
         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({
         de: "Erfahren Sie mehr über uns",
         en: "Learn About Us",
         es: "Aprender Sobre Nosotros",
         fr: "En savoir plus sur nous",
       }),
       homeLink: t({
         de: "Startseite",
         en: "Home",
         es: "Inicio",
         fr: "Accueil",
       }),
     },
   } satisfies Dictionary;
   
   export default pageContent;
   

   Ihre Inhaltsdeklarationen können überall in Ihrer Anwendung definiert werden, sobald sie in das Verzeichnis contentDir aufgenommen werden (standardmäßig ./app). Und sie müssen der Dateierweiterung für Inhaltsdeklarationen entsprechen (standardmäßig .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

   Kann bei Verwendung von dateisystembasiertem Routing in app/routes/($locale)._index.content.ts platziert werden.

   Für weitere Details siehe die Dokumentation zur Inhaltsdeklaration.

7. 7

   Erstellen Sie locale-bewusste Komponenten

   Erstellen Sie eine LocalizedLink-Komponente für locale-bewusste Navigation:

   app/components/localized-link.tsx

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   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);
   
   // Prüft, ob der Link extern ist
   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),
     };
   };
   
   // Lokalisierter Link-Komponenten für die Navigation
   export const LocalizedLink: FC<LinkProps> = (props) => {
     const { locale } = useLocale();
   
     return <Link {...props} to={locacalizeTo(props.to, locale)} />;
   };
   

   Falls Sie zu den lokalisierten Routen navigieren möchten, können Sie den useLocalizedNavigate Hook verwenden:

   app/hooks/useLocalizedNavigate.ts

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   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. 8

   Verwenden Sie Intlayer in Ihren Seiten

   Greifen Sie in Ihrer gesamten Anwendung auf Ihre Inhaltswörterbücher zu:

   Lokalisierte Startseite

   Config-basiertes RoutingFile-system-Routes

   app/routes/page.tsx

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   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

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   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>
     );
   }
   

   Weitere Informationen zum useIntlayer Hook finden Sie in der Dokumentation.

   Falls Ihre App bereits vorhanden ist, können Sie den Intlayer Compiler sowie den extract-Befehl verwenden, um Tausende von Komponenten in einer Sekunde zu transformieren.

9. 9

   Erstellen Sie eine Locale-Switcher-Komponente

   Erstellen Sie eine Komponente, um Benutzern den Sprachwechsel zu ermöglichen:

   Config-basiertes RoutingFile-system-Routes

   app/components/locale-switcher.tsx

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   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)}
               to={getLocalizedUrl(pathWithoutLocale, localeItem)}
             >
               <span>
                 {/* Locale - z.B. FR */}
                 {localeItem}
               </span>
               <span>
                 {/* Sprache in ihrer eigenen Locale - z.B. Français */}
                 {getLocaleName(localeItem, locale)}
               </span>
               <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
                 {/* Sprache in aktueller Locale - z.B. Francés mit aktueller Locale auf Locales.SPANISH */}
                 {getLocaleName(localeItem)}
               </span>
               <span dir="ltr" lang={defaultLocale}>
                 {/* Sprache auf Englisch - z.B. French */}
                 {getLocaleName(localeItem, defaultLocale)}
               </span>
             </Link>
           </li>
         ))}
       </ol>
     );
   };
   

   app/components/locale-switcher.tsx

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   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 // Seite neu laden, um die neue Locale anzuwenden
               to={getLocalizedUrl(pathWithoutLocale, localeItem)}
             >
               <span>
                 {/* Locale - z.B. FR */}
                 {localeItem}
               </span>
               <span>
                 {/* Sprache in ihrer eigenen Locale - z.B. Français */}
                 {getLocaleName(localeItem, locale)}
               </span>
               <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
                 {/* Sprache in aktueller Locale - z.B. Francés mit aktueller Locale auf Locales.SPANISH */}
                 {getLocaleName(localeItem)}
               </span>
               <span dir="ltr" lang={defaultLocale}>
                 {/* Sprache auf Englisch - z.B. French */}
                 {getLocaleName(localeItem, defaultLocale)}
               </span>
             </Link>
           </li>
         ))}
       </ol>
     );
   };
   

   Weitere Informationen zum useLocale Hook finden Sie in der Dokumentation.

10. 10

    HTML-Attribute-Verwaltung hinzufügen

    Erstellen Sie einen Hook zur Verwaltung von HTML lang- und dir-Attributen:

    app/hooks/useI18nHTMLAttributes.tsx

    Inhalt kopieren

    Code kopieren

    Kopieren Sie den Code in die Zwischenablage

    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]);
    };
    

    Verwenden Sie es dann in Ihrer Root-Komponente:

    app/routes/layout.tsx

    Inhalt kopieren

    Code kopieren

    Kopieren Sie den Code in die Zwischenablage

    import { Outlet } from "react-router";
    import { IntlayerProvider } from "react-intlayer";
    
    import { useI18nHTMLAttributes } from "app/hooks/useI18nHTMLAttributes"; // Hook importieren
    
    export default function RootLayout() {
      useI18nHTMLAttributes(); // Hook aufrufen
    
      return (
        <IntlayerProvider>
          <Outlet />
        </IntlayerProvider>
      );
    }
    

11. 11

    Middleware hinzufügen

    Sie können auch intlayerProxy verwenden, um Server-seitiges Routing zu Ihrer Anwendung hinzuzufügen. Dieses Plugin erkennt automatisch die aktuelle Locale basierend auf der URL und setzt das entsprechende Locale-Cookie. Wenn keine Locale angegeben ist, bestimmt das Plugin die am besten geeignete Locale basierend auf den Spracheinstellungen des Browsers des Benutzers. Wenn keine Locale erkannt wird, wird es zur Standard-Locale weitergeleitet.

    Beachten Sie, dass Sie das vite-intlayer Paket von devDependencies zu dependencies verschieben müssen, um intlayerProxy in der Produktion zu verwenden.

    Seit Intlayer v9 ist intlayerProxy() direkt im intlayer() Plugin gebündelt und standardmäßig über die routing.enableProxy Option (true standardmäßig) aktiviert. Das separate Registrieren wie unten gezeigt ist jetzt optional – es wird aus Gründen der Rückwärtskompatibilität und für Setups, die die Plugin-Reihenfolge kontrollieren müssen, beibehalten. Setzen Sie routing.enableProxy: false, um zu deaktivieren. Siehe v9 Release Notes.

    vite.config.ts

    Inhalt kopieren

    Code kopieren

    Kopieren Sie den Code in die Zwischenablage

    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. 12

    Extrahieren Sie den Inhalt Ihrer Komponenten

    Optional

    Falls Sie bereits eine vorhandene Codebasis haben, kann die Transformation von Tausenden von Dateien zeitaufwendig sein.

    Um diesen Prozess zu erleichtern, stellt Intlayer einen Compiler / Extractor bereit, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren.

    Um das einzurichten, können Sie einen compiler Bereich in Ihrer intlayer.config.ts Datei hinzufügen:

    intlayer.config.ts

    Inhalt kopieren

    Code kopieren

    Kopieren Sie den Code in die Zwischenablage

    import { type IntlayerConfig } from "intlayer";
    
    const config: IntlayerConfig = {
      // ... Rest Ihrer Config
      compiler: {
        /**
         * Zeigt an, ob der Compiler aktiviert sein soll.
         */
        enabled: true,
    
        /**
         * Definiert den Ausgabedateipfad
         */
        output: ({ fileName, extension }) => `./${fileName}${extension}`,
    
        /**
         * Zeigt an, ob die Komponenten nach der Transformation gespeichert werden sollen.
         *
         * - Falls `true`, schreibt der Compiler die Komponentendatei auf die Festplatte. So wird die Transformation permanent, und der Compiler überspringt die Transformation beim nächsten Prozess. Auf diese Weise kann der Compiler die App transformieren und anschließend entfernt werden.
         *
         * - Falls `false`, wird der Compiler den `useIntlayer()` Funktionsaufruf nur in die Buildausgabe einfügen und die Basis-Codebasis intakt halten. Die Transformation wird nur im Speicher durchgeführt.
         */
        saveComponents: false,
    
        /**
         * Dictionary-Schlüssel-Präfix
         */
        dictionaryKeyPrefix: "",
      },
    };
    
    export default config;
    

    Extract-BefehlBabel-Compiler

    Führen Sie den Extractor aus, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren

    bash

    Inhalt kopieren

    Code kopieren

    Kopieren Sie den Code in die Zwischenablage

    npx intlayer extract
    

    Seit v9 ist der intlayerCompiler im intlayer Plugin enthalten. Sie müssen ihn also nicht manuell hinzufügen.

    Aktualisieren Sie Ihre vite.config.ts, um das intlayerCompiler Plugin einzuschließen:

    vite.config.ts

    Inhalt kopieren

    Code kopieren

    Kopieren Sie den Code in die Zwischenablage

    import { defineConfig } from "vite";
    import { intlayer, intlayerCompiler } from "vite-intlayer";
    
    export default defineConfig({
      plugins: [
        intlayer(),
        intlayerCompiler(), // Fügt das Compiler-Plugin hinzu
      ],
    });
    

    bash

    Inhalt kopieren

    Code kopieren

    Kopieren Sie den Code in die Zwischenablage

    npm run build # Oder npm run dev
    

TypeScript konfigurieren

Intlayer verwendet module augmentation, um die Vorteile von TypeScript zu nutzen und Ihre Codebase zu stärken.

Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen enthält:

{
  // ... Ihre vorhandenen Konfigurationen
  include: [
    // ... Ihre vorhandenen includes
    ".intlayer/**/*.ts", // Include the auto-generated types
  ],
}

Git-Konfiguration

Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. Dies ermöglicht es Ihnen, zu vermeiden, dass diese in Ihr Git-Repository committed werden.

Dazu können Sie die folgenden Anweisungen zu Ihrer .gitignore-Datei hinzufügen:

# Von Intlayer generierte Dateien ignorieren
.intlayer

VS Code Extension

Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle Intlayer VS Code Extension installieren.

Installieren Sie es vom VS Code Marketplace

Diese Extension bietet:

• Autocompletion für Übersetzungsschlüssel.
• Echtzeit-Fehlererkennung für fehlende Übersetzungen.
• Inline-Vorschau des übersetzten Inhalts.
• Quick Actions zum einfachen Erstellen und Aktualisieren von Übersetzungen.

Weitere Details zur Verwendung der Extension finden Sie in der Intlayer VS Code Extension-Dokumentation.

Weiter geht's

Um noch tiefer einzusteigen, kannst du den visuellen Editor implementieren oder deinen Inhalt mit dem CMS externalisieren.

Dokumentationsreferenzen

• Intlayer Documentation
• React Router v7 Documentation
• useIntlayer hook
• useLocale hook
• Content Declaration
• Configuration

Dieser umfassende Leitfaden bietet alles, was Sie benötigen, um Intlayer mit React Router v7 für eine vollständig internationalisierte Anwendung mit locale-aware Routing und TypeScript-Unterstützung zu integrieren.

Häufig gestellte Fragen