Ü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:

.├── 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:

npm install intlayer svelte-intlayernpm install vite-intlayer --save-dev

• 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:

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.

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.

import { t, type Dictionary } from "intlayer";const heroContent = {  key: "hero-section",  content: {    title: t({      en: "Welcome to SvelteKit",      fr: "Bienvenue sur SvelteKit",      es: "Bienvenido a SvelteKit",    }),  },} satisfies Dictionary;export default heroContent;

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: 2025-11-20 title: So übersetzen Sie Ihre SvelteKit-App – i18n-Anleitung 2025 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:

• Internationalisierung
• Dokumentation
• Intlayer
• SvelteKit
• JavaScript
• SSR slugs:
• doc
• environment
• sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
• version: 7.1.10 date: 2025-11-20 changes: Historie initialisiert

Ü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:

.├── 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:

npm install intlayer svelte-intlayernpm install vite-intlayer --save-dev

• 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:

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.

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.

import { t, type Dictionary } from "intlayer";const heroContent = {  key: "hero-section",  content: {    title: t({      en: "Welcome to SvelteKit",      fr: "Bienvenue sur SvelteKit",      es: "Bienvenido a SvelteKit",    }),  },} satisfies Dictionary;export default heroContent;

Schritt 5: Verwenden Sie Intlayer in Ihren Komponenten

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

<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><svelte:component this={$content.title} /></h1><!-- Um den Inhalt als String darzustellen --><div aria-label={$content.title.value}></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.

.└─── 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:

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:

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:

import { configuration, type Locale } from "intlayer";export const match = (  param: Locale = configuration.internationalization.defaultLocale): boolean => {  return configuration.internationalization.locales.includes(param);};

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

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:

<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]]:

import type { Load } from "@sveltejs/kit";import { configuration, 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) ??    configuration.internationalization.defaultLocale;  return {    locale,  };};

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

export const prerender = true;

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

<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:

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.

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

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [intlayer(), intlayerProxy(), 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.

<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) -->  <svelte:component this={$content.component} /></div>

Git-Konfiguration

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

# Ignoriere die von Intlayer generierten Dateien.intlayer

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.