Stellen Sie Ihre Frage und erhalten Sie einen Resümee des Dokuments, indem Sie diese Seite und den AI-Anbieter Ihrer Wahl referenzieren
Versionshistorie
- "Aktualisieren der Solid useIntlayer API-Nutzung auf direkten Eigenschaftszugriff"v8.9.04.5.2026
- "Init-Befehl hinzufügen"v7.5.930.12.2025
- "Einführung von validatePrefix und Hinzufügen von Schritt 14: Behandlung von 404-Seiten mit lokalisierten Routen."v7.4.011.12.2025
- "Schritt 13 hinzugefügt: Abrufen der Locale in Ihren Serveraktionen (Optional)"v7.3.95.12.2025
- "Schritt 13 hinzugefügt: Nitro anpassen"v7.2.318.11.2025
- "Präfix-Standard durch Hinzufügen der getPrefix-Funktion, useLocalizedNavigate, LocaleSwitcher und LocalizedLink korrigiert."v7.1.017.11.2025
- "Dokumentation aktualisiert"v6.5.23.10.2025
- "Für Tanstack Start hinzugefügt"v5.8.19.9.2025
Der Inhalt dieser Seite wurde mit einer KI übersetzt.
Den englischen Originaltext ansehenWenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.
GitHub-Link zur DokumentationMarkdown des Dokuments in die Zwischenablage kopieren
Übersetzen Sie Ihre Tanstack Start-Website mit Intlayer | Internationalisierung (i18n)
Inhaltsverzeichnis
Diese Anleitung zeigt, wie Sie Intlayer für eine nahtlose Internationalisierung in Tanstack Start-Projekten mit lokalisierungsbewusstem Routing, TypeScript-Unterstützung und modernen Entwicklungspraktiken integrieren.
Was ist Intlayer?
Intlayer ist eine innovative Open-Source-Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die mehrsprachige Unterstützung in modernen Webanwendungen zu vereinfachen.
Mit Intlayer können Sie:
- Übersetzungen einfach verwalten mithilfe deklarativer Wörterbücher auf Komponentenebene.
- Metadaten, Routen und Inhalte dynamisch lokalisieren.
- TypeScript-Unterstützung sicherstellen mit automatisch generierten Typen, die die Autovervollständigung und Fehlererkennung verbessern.
- Von erweiterten Funktionen profitieren, wie dynamischer Locale-Erkennung und -Umschaltung.
- Lokalisierungsbewusstes Routing aktivieren mit dem dateibasierten Routing-System von Tanstack Start.
Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer Tanstack Start-Anwendung
Siehe Anwendungsvorlage auf GitHub.
Schritt 1: Projekt erstellen
Beginnen Sie mit der Erstellung eines neuen TanStack Start-Projekts, indem Sie der Anleitung Neues Projekt starten auf der TanStack Start-Website folgen.
Schritt 2: Intlayer-Pakete installieren
Installieren Sie die erforderlichen Pakete mit Ihrem bevorzugten Paketmanager:
Kopieren Sie den Code in die Zwischenablage
npm install intlayer react-intlayernpm install vite-intlayer --save-devnpx intlayer initintlayer
Das Kernpaket, das Internationalisierungswerkzeuge für Konfigurationsmanagement, Übersetzung, Inhaltsdeklaration, Transpilation und CLI-Befehle bereitstellt.
react-intlayer Das Paket, das Intlayer in die React-Anwendung integriert. Es bietet Kontextanbieter und Hooks für die Internationalisierung in React.
vite-intlayer Enthält das Vite-Plugin zur Integration von Intlayer mit dem Vite-Bundler sowie Middleware zur Erkennung der bevorzugten Sprache des Benutzers, zur Verwaltung von Cookies und zur Handhabung von URL-Weiterleitungen.
Schritt 3: Konfiguration Ihres Projekts
Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu konfigurieren:
Kopieren Sie den Code in die Zwischenablage
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;Über diese Konfigurationsdatei können Sie lokalisierte URLs, Middleware-Weiterleitungen, Cookie-Namen, den Speicherort und die Erweiterung Ihrer Inhaltsdeklarationen festlegen, Intlayer-Protokolle in der Konsole deaktivieren und vieles mehr. Eine vollständige Liste der verfügbaren Parameter finden Sie in der Konfigurationsdokumentation.
Schritt 4: Intlayer in Ihre Vite-Konfiguration integrieren
Fügen Sie das Intlayer-Plugin zu Ihrer Konfiguration hinzu:
Kopieren Sie den Code in die Zwischenablage
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(), tanstackStart({ router: { routeFileIgnorePattern: ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$", }, }), viteReact(), ],});export default config;Das intlayer() Vite-Plugin wird verwendet, um Intlayer mit Vite zu integrieren. Es stellt die Erstellung von Inhaltsdeklarationsdateien sicher und überwacht diese im Entwicklungsmodus. Es definiert Intlayer-Umgebungsvariablen innerhalb der Vite-Anwendung. Darüber hinaus bietet es Aliase zur Leistungsoptimierung.
Schritt 5: Root-Layout erstellen
Konfigurieren Sie Ihr Root-Layout zur Unterstützung der Internationalisierung, indem Sie useParams verwenden, um die aktuelle Locale zu erkennen und die Attribute lang und dir für das html-Tag festzulegen.
Kopieren Sie den Code in die Zwischenablage
import { createRootRouteWithContext, HeadContent, Scripts,} from "@tanstack/react-router";import { defaultLocale, getHTMLTextDir } from "intlayer";import { type ReactNode } from "react";import { IntlayerProvider } from "react-intlayer";import { Route as LocaleRoute } from "./{-$locale}/route";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> );}Wenn Sie Ihren Inhalt in einemstring-Attribut verwenden möchten, wie z.B.alt,title,href,aria-labelusw., müssen Sie den Wert der Funktion aufrufen, zum Beispiel:
htmlCode kopierenKopieren Sie den Code in die Zwischenablage
<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)}" />
Schritt 6: Locale-Layout erstellen
Erstellen Sie ein Layout, das das Locale-Präfix verarbeitet und eine Validierung durchführt.
Kopieren Sie den Code in die Zwischenablage
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";import { validatePrefix } from "intlayer";export const Route = createFileRoute("/{-$locale}")({ beforeLoad: ({ params }) => { const localeParam = params.locale; // Locale-Präfix validieren const { isValid, localePrefix } = validatePrefix(localeParam); if (!isValid) { throw redirect({ to: "/{-$locale}/404", params: { locale: localePrefix }, }); } }, component: Outlet,});Hier ist{-$locale}ein dynamischer Routenparameter, der durch die aktuelle Locale ersetzt wird. Diese Notation macht den Platzhalter optional, sodass er mit Routing-Modi wie'prefix-no-default'usw. funktioniert.
Beachten Sie, dass dieser Platzhalter Probleme verursachen kann, wenn Sie mehrere dynamische Segmente in derselben Route verwenden (z. B.
/{-$locale}/anderer-pfad/$einWeitererDynamischerPfad/...). Für den Modus'prefix-all'sollten Sie stattdessen den Platzhalter$localeverwenden. Für den Modus'no-prefix'oder'search-params'können Sie den Platzhalter ganz entfernen.
Schritt 7: Inhalte deklarieren
Erstellen und verwalten Sie Ihre Inhaltsdeklarationen, um Übersetzungen zu speichern:
Kopieren Sie den Code in die Zwischenablage
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;Ihre Inhaltsdeklarationen können überall in Ihrer Anwendung definiert werden, solange sie im VerzeichniscontentDir(standardmäßig./app) enthalten sind. Und sie müssen der Dateierweiterung für Inhaltsdeklarationen entsprechen (standardmäßig.content.{json,ts,tsx,js,jsx,mjs,cjs}).
Weitere Einzelheiten finden Sie in der Dokumentation zur Inhaltsdeklaration.
Schritt 7: Lokalisierungsbewusste Komponenten und Hooks erstellen
Erstellen Sie eine LocalizedLink-Komponente für lokalisierungsbewusste Navigation:
Kopieren Sie den Code in die Zwischenablage
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"]} /> );};Diese Komponente verfolgt zwei Ziele:
- Entfernen des unnötigen
{-$locale}-Präfixes aus der URL. - Einfügen des Locale-Parameters in die URL, um sicherzustellen, dass der Benutzer direkt auf die lokalisierte Route weitergeleitet wird.
Dann können wir einen useLocalizedNavigate-Hook für die programmatische Navigation erstellen:
Kopieren Sie den Code in die Zwischenablage
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;};Schritt 8: Intlayer in Ihren Seiten nutzen
Greifen Sie in Ihrer gesamten Anwendung auf Ihre Inhaltswörterbücher zu:
Lokalisierte Startseite
Kopieren Sie den Code in die Zwischenablage
import { createFileRoute } from "@tanstack/react-router";import { getIntlayer } from "intlayer";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> );}Um mehr über den useIntlayer-Hook zu erfahren, lesen Sie die Dokumentation.
Schritt 9: Eine Locale-Switcher-Komponente erstellen
Erstellen Sie eine Komponente, mit der Benutzer die Sprache wechseln können:
Kopieren Sie den Code in die Zwischenablage
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 - z. B. FR */} {localeEl} </span> <span> {/* Sprache in ihrer eigenen Locale - z. B. Français */} {getLocaleName(localeEl, locale)} </span> <span dir={getHTMLTextDir(localeEl)} lang={localeEl}> {/* Sprache in der aktuellen Locale - z. B. Francés, wenn die aktuelle Locale auf Locales.SPANISH eingestellt ist */} {getLocaleName(localeEl)} </span> <span dir="ltr" lang={Locales.ENGLISH}> {/* Sprache auf Englisch - z. B. French */} {getLocaleName(localeEl, Locales.ENGLISH)} </span> </LocalizedLink> </li> ))} </ol> );};Um mehr über den useLocale-Hook zu erfahren, lesen Sie die Dokumentation.
Schritt 10: HTML-Attribute-Verwaltung
Wie in Schritt 5 gezeigt, können Sie die Attribute lang und dir des html-Tags mit useParams in Ihrer Root-Komponente verwalten. Dies stellt sicher, dass die richtigen Attribute auf dem Server und dem Client gesetzt werden.
Kopieren Sie den Code in die Zwischenablage
function RootDocument({ children }: { children: ReactNode }) { const params = LocaleRoute.useParams(); const locale = params?.locale ?? defaultLocale; return ( <html dir={getHTMLTextDir(locale)} lang={locale}> {/* ... */} </html> );}Schritt 11: Middleware hinzufügen (Optional)
Sie können auch den intlayerProxy verwenden, um serverseitiges 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 auf die Standard-Locale weitergeleitet.
Beachten Sie, dass Sie zur Verwendung desintlayerProxyin der Produktion das Paketvite-intlayervondevDependencieszudependenciesverschieben müssen.
Kopieren Sie den Code in die Zwischenablage
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, intlayerProxy } from "vite-intlayer";export default defineConfig({ plugins: [ intlayerProxy(), // Der Proxy sollte vor dem Server platziert werden, wenn Sie Nitro verwenden nitro(), intlayer(), tanstackStart({ router: { routeFileIgnorePattern: ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$", }, }), viteReact(), ],});Schritt 12: Metadaten internationalisieren (Optional)
Sie können auch den getIntlayer-Hook verwenden, um in Ihrer gesamten Anwendung auf Ihre Inhaltswörterbücher zuzugreifen:
Kopieren Sie den Code in die Zwischenablage
import { createFileRoute } from "@tanstack/react-router";import { getIntlayer } from "intlayer";export const Route = createFileRoute("/{-$locale}/")({ component: RouteComponent, head: ({ params }) => { const { locale } = params; const path = "/"; // The path for this route const metaContent = getIntlayer("app", locale); return { links: [ // Canonical link: Points to the current localized page { rel: "canonical", href: getLocalizedUrl(path, locale) }, // Hreflang: Tell Google about all localized 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 }, ], }; },});Schritt 13: Locale in Ihren Serveraktionen abrufen (Optional)
Vielleicht möchten Sie von Ihren Serveraktionen oder API-Endpunkten aus auf die aktuelle Locale zugreifen.
Dies können Sie mit dem Helfer getLocale von intlayer tun.
Hier ist ein Beispiel mit den Serverfunktionen von TanStack Start:
Kopieren Sie den Code in die Zwischenablage
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({ // Cookie aus der Anfrage abrufen (Standard: 'INTLAYER_LOCALE') getCookie: (name) => { const cookieString = getRequestHeader("cookie"); return getCookie(name, cookieString); }, // Header aus der Anfrage abrufen (Standard: 'x-intlayer-locale') // Fallback mit Accept-Language-Aushandlung getHeader: (name) => getRequestHeader(name), }); // Inhalte mit getIntlayer() abrufen const content = getIntlayer("app", locale); return { locale, content };});Schritt 14: Nicht gefundene Seiten verwalten (Optional)
Wenn ein Benutzer eine nicht existierende Seite besucht, können Sie eine benutzerdefinierte 404-Seite anzeigen. Das Locale-Präfix kann beeinflussen, wie die 404-Seite ausgelöst wird.
Verständnis der 404-Behandlung von TanStack Router mit Locale-Präfixen
In TanStack Router erfordert die Behandlung von 404-Seiten mit lokalisierten Routen einen mehrschichtigen Ansatz:
- Dedizierte 404-Route: Eine spezifische Route zur Anzeige der 404-UI
- Validierung auf Routenebene: Validiert Locale-Präfixe und leitet ungültige auf 404 weiter
- Catch-all-Route: Erfasst alle nicht übereinstimmenden Pfade innerhalb des Locale-Segments
Kopieren Sie den Code in die Zwischenablage
import { createFileRoute } from "@tanstack/react-router";// Dies erstellt eine dedizierte /[locale]/404 Route// Sie wird sowohl als direkte Route verwendet als auch als Komponente in anderen Dateien importiertexport const Route = createFileRoute("/{-$locale}/404")({ component: NotFoundComponent,});// Separat exportiert, damit sie in notFoundComponent und Catch-all-Routen wiederverwendet werden kannexport function NotFoundComponent() { return ( <div> <h1>404</h1> </div> );}Kopieren Sie den Code in die Zwischenablage
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";import { validatePrefix } from "intlayer";import { NotFoundComponent } from "./404";export const Route = createFileRoute("/{-$locale}")({ // beforeLoad wird ausgeführt, bevor die Route gerendert wird (sowohl auf dem Server als auch auf dem Client) // Es ist der ideale Ort, um das Locale-Präfix zu validieren beforeLoad: ({ params }) => { const localeParam = params.locale; // validatePrefix prüft, ob die Locale gemäß Ihrer Intlayer-Konfiguration gültig ist const { isValid, localePrefix } = validatePrefix(localeParam); if (!isValid) { // Ungültiges Locale-Präfix - Weiterleitung zur 404-Seite mit einem gültigen Locale-Präfix throw redirect({ to: "/{-$locale}/404", params: { locale: localePrefix }, }); } }, component: Outlet, // notFoundComponent wird aufgerufen, wenn eine untergeordnete Route nicht existiert // z.B. löst /en/nicht-existierende-seite dies innerhalb des /en-Layouts aus notFoundComponent: NotFoundComponent,});Kopieren Sie den Code in die Zwischenablage
import { createFileRoute } from "@tanstack/react-router";import { NotFoundComponent } from "./404";// Die $ (Splat/Catch-all) Route entspricht jedem Pfad, der nicht mit anderen Routen übereinstimmt// z.B. /en/irgendein/tief/verschachtelter/ungültiger/pfad// Dies stellt sicher, dass ALLE nicht übereinstimmenden Pfade innerhalb einer Locale die 404-Seite anzeigen// Ohne dies könnten nicht übereinstimmende tiefe Pfade eine leere Seite oder einen Fehler anzeigenexport const Route = createFileRoute("/{-$locale}/$")({ component: NotFoundComponent,});(Optional) Schritt 15 : Inhalt Ihrer Komponenten extrahieren
Wenn Sie eine bestehende Codebasis haben, kann die Transformation von Tausenden von Dateien zeitaufwendig sein.
Um diesen Prozess zu erleichtern, bietet Intlayer einen Compiler / Extractor an, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren.
Um es einzurichten, können Sie einen compiler-Abschnitt in Ihrer intlayer.config.ts-Datei hinzufügen:
Kopieren Sie den Code in die Zwischenablage
import { type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
// ... Rest Ihrer Konfiguration
compiler: {
/**
* Gibt an, ob der Compiler aktiviert sein soll.
*/
enabled: true,
/**
* Definiert den Pfad der Ausgabedateien
*/
output: ({ fileName, extension }) => `./${fileName}${extension}`,
/**
* Gibt an, ob die Komponenten nach der Transformation gespeichert werden sollen. Auf diese Weise kann der Compiler nur einmal ausgeführt werden, um die App zu transformieren, und dann entfernt werden.
*/
saveComponents: false,
/**
* Präfix für Wörterbuchschlüssel
*/
dictionaryKeyPrefix: "",
},
};
export default config;Führen Sie den Extractor aus, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren
Kopieren Sie den Code in die Zwischenablage
npx intlayer extractSchritt 16: Sitemap generieren (Optional)
Intlayer wird mit einem integrierten Sitemap-Generator geliefert, mit dem Sie ganz einfach eine Sitemap für Ihre Anwendung erstellen können. Er berücksichtigt lokalisierte Routen und fügt die erforderlichen Metadaten für Suchmaschinen hinzu.
Die von Intlayer generierte Sitemap unterstützt denxhtml:link-Namespace (Hreflang XML-Erweiterungen). Im Gegensatz zu Standard-Sitemap-Generatoren, die nur rohe URLs auflisten, erstellt Intlayer automatisch die erforderlichen bidirektionalen Links zwischen allen Sprachversionen einer Seite (z. B./about,/about?lang=frund/about?lang=es). Dies stellt sicher, dass Suchmaschinen die richtige Sprachversion korrekt indexieren und der richtigen Zielgruppe bereitstellen.
Um ihn zu verwenden, müssen Sie zuerst Ihre vite.config.ts konfigurieren, um das Vorrendern für Ihre lokalisierten Routen zu aktivieren und die standardmäßige TanStack Start Sitemap-Generierung zu deaktivieren.
Kopieren Sie den Code in die Zwischenablage
import { localeFlatMap } from "intlayer";// ... andere Importsexport const pathList = ["", "/about", "/404"];const localizedPages = localeFlatMap(({ urlPrefix }) => pathList.map((path) => ({ path: `${urlPrefix}${path}`, prerender: { enabled: true, }, })));export default defineConfig({ plugins: [ // ... andere Plugins tanstackStart({ // ... andere Konfigurationen sitemap: { enabled: false, }, prerender: { enabled: true, crawlLinks: false, concurrency: 10, }, pages: localizedPages, }), ],});Erstellen Sie dann eine Route src/routes/sitemap[.]xml.ts, die die Funktion generateSitemap verwendet:
Kopieren Sie den Code in die Zwischenablage
import { createFileRoute } from "@tanstack/react-router";import { generateSitemap } from "intlayer";const SITE_URL = ( import.meta.env.VITE_SITE_URL ?? "http://localhost:3000").replace(/\/$/, "");export const Route = createFileRoute("/sitemap.xml")({ server: { 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" }, }); }, }, },});Schritt 17: TypeScript konfigurieren (Optional)
Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihre Codebasis robuster zu machen.
Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen enthält:
Kopieren Sie den Code in die Zwischenablage
{ // ... Ihre bestehenden Konfigurationen include: [ // ... Ihre bestehenden Includes ".intlayer/**/*.ts", // Die automatisch generierten Typen einschließen ],}Git-Konfiguration
Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. So vermeiden Sie, dass diese in Ihr Git-Repository übertragen werden.
Fügen Sie dazu die folgenden Anweisungen zu Ihrer .gitignore-Datei hinzu:
Kopieren Sie den Code in die Zwischenablage
# Die von Intlayer generierten Dateien ignorieren.intlayerVS Code Erweiterung
Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle Intlayer VS Code Erweiterung installieren.
Aus dem VS Code Marketplace installieren
Diese Erweiterung bietet:
- Autovervollständigung für Übersetzungsschlüssel.
- Echtzeit-Fehlererkennung für fehlende Übersetzungen.
- Inline-Vorschauen von übersetzten Inhalten.
- Schnellaktionen, um Übersetzungen einfach zu erstellen und zu aktualisieren.
Weitere Einzelheiten zur Verwendung der Erweiterung finden Sie in der Dokumentation zur Intlayer VS Code Erweiterung.
Weiterführende Informationen
Um noch weiter zu gehen, können Sie den visuellen Editor implementieren oder Ihre Inhalte über das CMS extern verwalten.