Creation:2025-11-20Last update:2026-05-06

    Übersetzen Sie Ihre SvelteKit-Website mit Intlayer | Internationalisierung (i18n)

    ide.intlayer.org

    Inhaltsverzeichnis

    Was ist Intlayer?

    Intlayer ist eine innovative, Open-Source-Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die mehrsprachige Unterstützung in modernen Webanwendungen zu vereinfachen. Sie arbeitet nahtlos mit den Server-Side-Rendering (SSR)-Fähigkeiten von SvelteKit zusammen.

    Mit Intlayer können Sie:

    • Übersetzungen einfach verwalten durch deklarative Wörterbücher auf Komponentenebene.
    • Metadaten, Routen und Inhalte dynamisch lokalisieren.
    • TypeScript-Unterstützung sicherstellen mit automatisch generierten Typen.
    • SvelteKits SSR nutzen für SEO-freundliche Internationalisierung.

    Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer SvelteKit-Anwendung

    Um zu beginnen, erstellen Sie ein neues SvelteKit-Projekt. Hier ist die finale Struktur, die wir erstellen werden:

    bash
    .├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

    Schritt 1: Abhängigkeiten installieren

    Installieren Sie die notwendigen Pakete mit npm:

    bash
    npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init
    • intlayer: Das Kernpaket für i18n.
    • svelte-intlayer: Stellt Context-Provider und Stores für Svelte/SvelteKit bereit.
    • vite-intlayer: Das Vite-Plugin zur Integration von Inhaltsdeklarationen in den Build-Prozess.

    Schritt 2: Konfiguration Ihres Projekts

    Erstellen Sie eine Konfigurationsdatei im Stammverzeichnis Ihres Projekts:

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

    Schritt 3: Integrieren Sie Intlayer in Ihre Vite-Konfiguration

    Aktualisieren Sie Ihre vite.config.ts, um das Intlayer-Plugin einzubinden. Dieses Plugin übernimmt die Transpilierung Ihrer Inhaltsdateien.

    vite.config.ts
    import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // Reihenfolge ist wichtig, Intlayer sollte vor SvelteKit stehen});

    Schritt 4: Deklarieren Sie Ihren Inhalt

    Erstellen Sie Ihre Inhaltsdeklarationsdateien irgendwo in Ihrem src-Ordner (z. B. src/lib/content oder neben Ihren Komponenten). Diese Dateien definieren den übersetzbaren Inhalt für Ihre Anwendung mithilfe der Funktion t() für jede Locale.

    Schritt 5: Verwenden Sie Intlayer in Ihren Komponenten

    Jetzt können Sie die Funktion useIntlayer in jeder Svelte-Komponente verwenden. Sie gibt einen reaktiven Store zurück, der sich automatisch aktualisiert, wenn sich die Locale ändert. Die Funktion berücksichtigt automatisch die aktuelle Locale (sowohl während SSR als auch bei der clientseitigen Navigation).

    Hinweis: useIntlayer gibt einen Svelte-Store zurück, daher müssen Sie das `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: So übersetzen Sie Ihre SvelteKit-App – i18n-Anleitung 2026 description: Entdecken Sie, wie Sie Ihre SvelteKit-Website mehrsprachig gestalten. Folgen Sie der Dokumentation, um sie mit Server-Side Rendering (SSR) zu internationalisieren (i18n) und zu übersetzen. keywords:

    Übersetzen Sie Ihre SvelteKit-Website mit Intlayer | Internationalisierung (i18n)

    Inhaltsverzeichnis

    Was ist Intlayer?

    Intlayer ist eine innovative, Open-Source-Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die mehrsprachige Unterstützung in modernen Webanwendungen zu vereinfachen. Sie arbeitet nahtlos mit den Server-Side-Rendering (SSR)-Fähigkeiten von SvelteKit zusammen.

    Mit Intlayer können Sie:

    • Übersetzungen einfach verwalten durch deklarative Wörterbücher auf Komponentenebene.
    • Metadaten, Routen und Inhalte dynamisch lokalisieren.
    • TypeScript-Unterstützung sicherstellen mit automatisch generierten Typen.
    • SvelteKits SSR nutzen für SEO-freundliche Internationalisierung.

    Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer SvelteKit-Anwendung

    Um zu beginnen, erstellen Sie ein neues SvelteKit-Projekt. Hier ist die finale Struktur, die wir erstellen werden:

    bash
    .├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

    Schritt 1: Abhängigkeiten installieren

    Installieren Sie die notwendigen Pakete mit npm:

    bash
    npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init
    • intlayer: Das Kernpaket für i18n.
    • svelte-intlayer: Stellt Context-Provider und Stores für Svelte/SvelteKit bereit.
    • vite-intlayer: Das Vite-Plugin zur Integration von Inhaltsdeklarationen in den Build-Prozess.

    Schritt 2: Konfiguration Ihres Projekts

    Erstellen Sie eine Konfigurationsdatei im Stammverzeichnis Ihres Projekts:

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

    Schritt 3: Integrieren Sie Intlayer in Ihre Vite-Konfiguration

    Aktualisieren Sie Ihre vite.config.ts, um das Intlayer-Plugin einzubinden. Dieses Plugin übernimmt die Transpilierung Ihrer Inhaltsdateien.

    vite.config.ts
    import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // Reihenfolge ist wichtig, Intlayer sollte vor SvelteKit stehen});

    Schritt 4: Deklarieren Sie Ihren Inhalt

    Erstellen Sie Ihre Inhaltsdeklarationsdateien irgendwo in Ihrem src-Ordner (z. B. src/lib/content oder neben Ihren Komponenten). Diese Dateien definieren den übersetzbaren Inhalt für Ihre Anwendung mithilfe der Funktion t() für jede Locale.

    Schritt 5: Verwenden Sie Intlayer in Ihren Komponenten

    -Präfix verwenden, um auf den reaktiven Wert zuzugreifen (z. B. $content.title).

    src/lib/components/Component.svelte
    <script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" entspricht dem in Schritt 4 definierten Schlüssel  const content = useIntlayer("hero-section");</script><!-- Inhalt als einfachen Inhalt rendern --><h1>{$content.title}</h1><!-- Um den Inhalt mit dem Editor bearbeitbar zu rendern --><h1>{@const Title = $content.title}<Title /></h1><!-- Um den Inhalt als String darzustellen --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

    (Optional) Schritt 6: Routing einrichten

    Die folgenden Schritte zeigen, wie man lokalisierungsbasiertes Routing in SvelteKit einrichtet. Dadurch können Ihre URLs das Locale-Präfix enthalten (z. B. /en/about, /fr/about) für bessere SEO und Benutzererfahrung.

    bash
    .└─── src    ├── app.d.ts                  # Definiert den Locale-Typ    ├── hooks.server.ts           # Verwalten des Locale-Routings    ├── lib    │   └── getLocale.ts          # Prüft die Locale aus Header, Cookies    ├── params    │   └── locale.ts             # Definiert den Locale-Parameter    └── routes        ├── [[locale=locale]]     # In einer Routengruppe einwickeln, um die Locale zu setzen        │   ├── +layout.svelte    # Lokales Layout für die Route        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Root-Layout für Schriftarten und globale Styles

    Schritt 7: Serverseitige Lokalerkennung (Hooks) verwalten

    In SvelteKit muss der Server die Locale des Benutzers kennen, um während des SSR den korrekten Inhalt zu rendern. Wir verwenden hooks.server.ts, um die Locale aus der URL oder Cookies zu erkennen.

    Erstellen oder ändern Sie src/hooks.server.ts:

    src/hooks.server.ts
    import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Prüfen, ob der aktuelle Pfad bereits mit einer Locale beginnt (z.B. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Wenn KEINE Locale in der URL vorhanden ist (z.B. Benutzer besucht "/"), weiterleiten  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Temporäre Weiterleitung    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

    Erstellen Sie dann einen Helfer, um die Locale des Benutzers aus dem Request-Event zu erhalten:

    src/lib/getLocale.ts
    import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Ermittelt die Locale des Benutzers aus dem Request-Event. * Diese Funktion wird im `handle` Hook in `src/hooks.server.ts` verwendet. * * Zuerst wird versucht, die Locale aus dem Intlayer-Speicher (Cookies oder benutzerdefinierte Header) zu erhalten. * Falls keine Locale gefunden wird, erfolgt ein Fallback auf die Browser-"Accept-Language" Verhandlung. * * @param event - Das Request-Event von SvelteKit * @returns Die Locale des Benutzers */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Versuche, die Locale aus dem Intlayer-Speicher (Cookies oder Header) zu erhalten  const storedLocale = getLocaleFromStorage({    // Zugriff auf SvelteKit-Cookies    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Zugriff auf SvelteKit-Header    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Fallback auf Browser-"Accept-Language"-Verhandlung  const negotiatorHeaders: Record<string, string> = {};  // Konvertiere SvelteKit Headers-Objekt in ein einfaches Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Prüfe die Locale aus dem `Accept-Language`-Header  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Rückgabe der Standard-Locale, falls keine Übereinstimmung gefunden wurde  return defaultLocale;};
    getLocaleFromStorage überprüft die Locale aus dem Header oder Cookie, abhängig von Ihrer Konfiguration. Weitere Details finden Sie unter Configuration.
    Die Funktion localeDetector verarbeitet den Accept-Language-Header und gibt die beste Übereinstimmung zurück.

    Wenn die Locale nicht konfiguriert ist, möchten wir einen 404-Fehler zurückgeben. Um dies zu erleichtern, können wir eine match-Funktion erstellen, um zu überprüfen, ob die Locale gültig ist:

    /src/params/locale.ts
    export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

    Hinweis: Stellen Sie sicher, dass Ihre src/app.d.ts die Locale-Definition enthält:

    typescript
    declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

    Für die Datei +layout.svelte können wir alles entfernen, um nur statischen Inhalt zu behalten, der nicht mit i18n zusammenhängt:

    src/+layout.svelte
    <script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

    Erstellen Sie dann eine neue Seite und ein Layout unter der Gruppe [[locale=locale]]:

    src/routes/[[locale=locale]]/+layout.ts
    import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Verwenden Sie den generischen Load-Typexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};
    src/routes/[[locale=locale]]/+layout.svelte
    <script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Initialisiere Intlayer mit der Locale aus der Route  $effect(() => {      setupIntlayer(data.locale);  });    // Verwende das Layout-Inhaltsverzeichnis    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>
    src/routes/[[locale=locale]]/+page.ts
    export const prerender = true;
    src/routes/[[locale=locale]]/+page.svelte
    <script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Verwenden Sie das Inhaltswörterbuch für die Startseite    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

    (Optional) Schritt 8: Internationalisierte Links

    Für SEO wird empfohlen, Ihre Routen mit dem Locale zu versehen (z. B. /en/about, /fr/about). Diese Komponente fügt automatisch jedem Link das aktuelle Locale als Präfix hinzu.

    src/lib/components/LocalizedLink.svelte
    <script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Hilfsfunktion, um die URL mit dem aktuellen Locale zu versehen  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

    Wenn Sie goto von SvelteKit verwenden, können Sie dieselbe Logik mit getLocalizedUrl verwenden, um zur lokalisierten URL zu navigieren:

    typescript
    import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Navigiert zu /en/about oder /fr/about je nach Locale

    (Optional) Schritt 9: Sprachumschalter

    Um den Benutzern das Wechseln der Sprache zu ermöglichen, aktualisieren Sie die URL.

    src/lib/components/LanguageSwitcher.svelte
    <script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Setzt die Locale im Store und löst onLocaleChange aus        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

    (Optional) Schritt 10: Backend-Proxy hinzufügen

    Um einen Backend-Proxy zu deiner SvelteKit-Anwendung hinzuzufügen, kannst du die Funktion intlayerProxy verwenden, die vom vite-intlayer Plugin bereitgestellt wird. Dieses Plugin erkennt automatisch die beste Locale für den Benutzer basierend auf der URL, Cookies und den Spracheinstellungen des Browsers.

    vite.config.ts
    import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

    (Optional) Schritt 11: Einrichtung des intlayer Editors / CMS

    Um den intlayer Editor einzurichten, müssen Sie der intlayer Editor Dokumentation folgen.

    Um das intlayer CMS einzurichten, müssen Sie der intlayer CMS Dokumentation folgen.

    Um den Intlayer-Editor-Selektor visualisieren zu können, müssen Sie die Komponentensyntax in Ihrem Intlayer-Inhalt verwenden.

    Component.svelte
    <script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Inhalt als einfachen Inhalt rendern -->  <h1>{$content.title}</h1>  <!-- Inhalt als Komponente rendern (vom Editor erforderlich) -->  {@const Component = $content.component}<Component /></div>

    Git-Konfiguration

    Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren.

    .gitignore
    # Ignoriere die von Intlayer generierten Dateien.intlayer

    (Optional) Schritt 12 : 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:

    intlayer.config.ts
    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

    bash
    npx intlayer extract

    Weiterführende Informationen

    • Visueller Editor: Integrieren Sie den Intlayer Visual Editor, um Übersetzungen direkt über die Benutzeroberfläche zu bearbeiten.
    • CMS: Externalisieren Sie Ihr Content-Management mit dem Intlayer CMS.
    Vite und Svelte
    Vite und Preact