Einrichtung

Jeder der folgenden Schritte ist für die Konfiguration nötig, mit der diese Seite läuft — Locale in der URL, zwischen den Besuchen in einem Cookie gemerkt. Geh sie der Reihe nach durch, und der letzte bringt eine übersetzte Zeile auf die Seite.

Einrichtung mit der Svelte CLI #

In einem bestehenden SvelteKit-3-Projekt erledigt ein einziger Befehl die Schritte 1–5 unten:

npx sv add svelte-dialect   # or: bunx sv add svelte-dialect / pnpm dlx sv add svelte-dialect

Er fragt nach deinen Locales (die erste ist die Standard-Locale) und ob die Locale in die URL soll, und dann:

trägt svelte-dialect in dependencies ein;
legt src/lib/i18n.ts mit createDialect an;
legt für jede Locale src/lib/messages/<locale>/common.json mit einer Begrüßung zum Übersetzen an;
exportiert handle aus src/hooks.server.ts (ein vorhandener handle wird in sequence() eingehängt) und, mit der Locale in der URL, reroute aus src/hooks.ts;
ergänzt die Platzhalter lang und dir am <html>-Tag in src/app.html.

Vorhandene Dateien bleiben unverändert. Um die Fragen zu überspringen, gib die Antworten direkt mit:

npx sv add svelte-dialect=locales:en,de+routing:yes

Danach eine Nachricht ausgeben wie in Schritt 6. Die Abschnitte unten sind dieselbe Einrichtung von Hand.

Installation #

npm install svelte-dialect   # or: bun add svelte-dialect / pnpm add svelte-dialect

Voraussetzung ist Svelte 5 und, für dieses Setup, SvelteKit 3. Ohne SvelteKit importierst du createDialect stattdessen aus svelte-dialect und lässt die Hooks weg: Messages, t() und Lazy-Namespaces funktionieren gleich, URL-Routing und die serverseitige Aushandlung brauchen jedoch Kit.

1. Eine Nachricht schreiben #

Eine JSON-Datei pro Locale und Namespace unter src/lib/messages/<locale>/<namespace>.json. Der Wert ist MessageFormat 2; für eine zweite Sprache legst du eine ru/common.json mit demselben Schlüssel an.

src/lib/messages/en/common.json

{ "greeting": "Hello, {$name}!" }

2. Den Dialect erzeugen #

Einmalig in src/lib/i18n.ts. routing legt die Locale in die URL; ohne diese Option funktionieren alle folgenden Exporte weiterhin, nur eben in einem reinen Cookie-Setup ohne Präfix.

src/lib/i18n.ts

import { createDialect } from 'svelte-dialect/kit';

export const { t, handle, reroute, localizeHref, locales } = createDialect({
	messages: import.meta.glob('./messages/**/*.json', { eager: true }),
	defaultLocale: 'en',
	routing: true
});

3. Der handle-Hook #

SvelteKit ruft ihn bei jedem Request auf. Er handelt die Locale aus — zuerst das URL-Präfix, dann das Cookie, dann Accept-Language — und schreibt sie in die Antwort, während die Seite hinausgestreamt wird.

src/hooks.server.ts

import type { Handle } from '@sveltejs/kit/hooks';
import { handle as dialect } from '#lib/i18n.js';

export const handle: Handle = dialect;

4. Der reroute-Hook #

Kommt in src/hooks.ts — universell, nicht in hooks.server.ts. Er entfernt das Präfix, bevor SvelteKit die Routen abgleicht, sodass /ru/about src/routes/about rendert, ohne dass du ein [locale]-Verzeichnis anlegen musst.

src/hooks.ts — universal, not hooks.server.ts

import type { Reroute } from '@sveltejs/kit/hooks';
import { reroute as dialect } from '#lib/i18n.js';

export const reroute: Reroute = dialect;

5. Das Dokument #

handle füllt diese beiden Platzhalter, während die Seite gerendert wird.

src/app.html

<html lang="de" dir="ltr">

6. Benutzen #

Importiere t, wo du willst. Starte den Dev-Server: Die Seite zeigt „Hello, world!“, und /ru zeigt die russische Zeile, sobald ru/common.json existiert.

src/routes/+page.svelte

<script lang="ts">
	import { t } from '#lib/i18n.js';
</script>

<p>{t('common:greeting', { name: 'world' })}</p>

Wie es weitergeht #

Damit steht die Grundlage: Schreibe weitere Message-Dateien und lies dann nach, wie das URL-Präfix und das Cookie darüber entscheiden, welche Locale ein Besucher sieht.