\n\n\n

{$content.title}

Name: Intlayer
Author: Intlayer

\n\n

{@const Title = $content.title}</h1>\n\n<div aria-label={$content.title.value}></div>\n<div aria-label={$content.title.toString()}></div>\n<div aria-label={String($content.title)}></div>\n```\n\n### (Optionnel) Étape 6 : Configurer le routage\n\nLes étapes suivantes montrent comment configurer un routage basé sur la locale dans SvelteKit. Cela permet à vos URLs d'inclure le préfixe de la locale (par exemple, `/en/about`, `/fr/about`) pour un meilleur SEO et une meilleure expérience utilisateur.\n\n```bash\n.\n└─── src\n ├── app.d.ts # Définir le type de la locale\n ├── hooks.server.ts # Gérer le routage des locales\n ├── lib\n │ └── getLocale.ts # Vérifier la locale depuis l'en-tête, les cookies\n ├── params\n │ └── locale.ts # Définir le paramètre locale\n └── routes\n ├── [[locale=locale]] # Encapsuler dans un groupe de routes pour définir la locale\n │ ├── +layout.svelte # Mise en page locale pour la route\n │ ├── +layout.ts\n │ ├── +page.svelte\n │ ├── +page.ts\n │ └── about\n │ ├── +page.svelte\n │ └── +page.ts\n └── +layout.svelte # Mise en page racine pour les polices et styles globaux\n```\n\n### Étape 7 : Gérer la détection de la locale côté serveur (Hooks)\n\nDans SvelteKit, le serveur doit connaître la locale de l'utilisateur pour rendre le contenu correct lors du SSR. Nous utilisons `hooks.server.ts` pour détecter la locale à partir de l'URL ou des cookies.\n\nCréez ou modifiez `src/hooks.server.ts` :\n\n```typescript fileName=\"src/hooks.server.ts\"\nimport type { Handle } from \"@sveltejs/kit\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { getLocale } from \"$lib/getLocale\";\n\nexport const handle: Handle = async ({ event, resolve }) => {\n const detectedLocale = getLocale(event);\n\n // Vérifie si le chemin actuel commence déjà par une locale (ex. /fr, /en)\n const pathname = event.url.pathname;\n const targetPathname = getLocalizedUrl(pathname, detectedLocale);\n\n // Si AUCUNE locale n'est présente dans l'URL (ex. l'utilisateur visite \"/\"), redirigez-le\n if (targetPathname !== pathname) {\n return new Response(undefined, {\n headers: { Location: targetPathname },\n status: 307, // Redirection temporaire\n });\n }\n\n return resolve(event, {\n transformPageChunk: ({ html }) => html.replace(\"%lang%\", detectedLocale),\n });\n};\n```\n\nEnsuite, créez un helper pour obtenir la locale de l'utilisateur à partir de l'événement de requête :\n\n```typescript fileName=\"src/lib/getLocale.ts\"\nimport {\n configuration,\n getLocaleFromStorage,\n localeDetector,\n type Locale,\n} from \"intlayer\";\nimport type { RequestEvent } from \"@sveltejs/kit\";\n\n/**\n * Récupère la locale de l'utilisateur à partir de l'événement de requête.\n * Cette fonction est utilisée dans le hook `handle` dans `src/hooks.server.ts`.\n *\n * Elle tente d'abord d'obtenir la locale depuis le stockage Intlayer (cookies ou en-têtes personnalisés).\n * Si la locale n'est pas trouvée, elle revient à la négociation \"Accept-Language\" du navigateur.\n *\n * @param event - L'événement de requête de SvelteKit\n * @returns La locale de l'utilisateur\n */\nexport const getLocale = (event: RequestEvent): Locale => {\n const defaultLocale = configuration?.internationalization?.defaultLocale;\n\n // Tente d'obtenir la locale depuis le stockage Intlayer (cookies ou en-têtes)\n const storedLocale = getLocaleFromStorage({\n // Accès aux cookies SvelteKit\n getCookie: (name: string) => event.cookies.get(name) ?? null,\n // Accès aux headers SvelteKit\n getHeader: (name: string) => event.request.headers.get(name) ?? null,\n });\n\n if (storedLocale) {\n return storedLocale;\n }\n\n // Repli sur la négociation \"Accept-Language\" du navigateur\n const negotiatorHeaders: Record<string, string> = {};\n\n // Conversion de l'objet Headers de SvelteKit en un Record<string, string> simple\n event.request.headers.forEach((value, key) => {\n negotiatorHeaders[key] = value;\n });\n\n // Vérification de la locale à partir du header `Accept-Language`\n const userFallbackLocale = localeDetector(negotiatorHeaders);\n\n if (userFallbackLocale) {\n return userFallbackLocale;\n }\n\n // Retourne la locale par défaut si aucune correspondance n'est trouvée\n return defaultLocale;\n};\n```\n\n> `getLocaleFromStorage` vérifiera la locale à partir de l'en-tête ou du cookie selon votre configuration. Voir [Configuration](https://intlayer.org/doc/configuration) pour plus de détails.\n\n> La fonction `localeDetector` traitera l'en-tête `Accept-Language` et retournera la meilleure correspondance.\n\nSi la locale n'est pas configurée, nous souhaitons retourner une erreur 404. Pour faciliter cela, nous pouvons créer une fonction `match` pour vérifier si la locale est valide :\n\n```ts fileName=\"/src/params/locale.ts\"import { defaultLocale, locales, type Locale } from \"intlayer\";\nexport const match = (param: Locale = defaultLocale): boolean =>\n locales.includes(param);\n```\n\n> **Note :** Assurez-vous que votre fichier `src/app.d.ts` inclut la définition de la locale :\n>\n> ```typescript\n> declare global {\n> namespace App {\n> interface Locals {\n> locale: import(\"intlayer\").Locale;\n> }\n> }\n> }\n> ```\n\nPour le fichier `+layout.svelte`, nous pouvons tout supprimer afin de ne conserver que le contenu statique, non lié à l’i18n :\n\n```svelte fileName=\"src/+layout.svelte\"\n<script lang=\"ts\">\n\t import './layout.css';\n\n let { children } = $props();\n</script>\n\n<div class=\"app\">\n\t{@render children()}\n</div>\n\n<style>\n\t.app {\n /* */\n\t}\n</style>\n```\n\nEnsuite, créez une nouvelle page et un layout sous le groupe `[[locale=locale]]` :\n\n```ts fileName=\"src/routes/[[locale=locale]]/+layout.ts\"\nimport type { Load } from \"@sveltejs/kit\";\nimport { defaultLocale, type Locale } from \"intlayer\";\n\nexport const prerender = true;\n\n// Utilisez le type générique Load\nexport const load: Load = ({ params }) => {\n const locale: Locale = (params.locale as Locale) ?? defaultLocale;\n\n return {\n locale,\n };\n};\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+layout.svelte\"\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\timport { useIntlayer, setupIntlayer } from \"svelte-intlayer\";\n\timport Header from './Header.svelte';\n\timport type { LayoutData } from './$types';\n\n\tlet { children, data }: { children: Snippet, data: LayoutData } = $props();\n\n\t// Initialiser Intlayer avec la locale provenant de la route\n $effect(() => {\n setupIntlayer(data.locale);\n });\n\t// Utiliser le dictionnaire de contenu du layout\n\tconst layoutContent = useIntlayer('layout');\n</script>\n\n<Header />\n\n<main>\n\t{@render children()}\n</main>\n\n<footer>\n\t<p>\n\t\t{$layoutContent.footer.prefix.value}{' '}\n\t\t<a href=\"https://svelte.dev/docs/kit\">{$layoutContent.footer.linkLabel.value}</a>{' '}\n\t\t{$layoutContent.footer.suffix.value}\n\t</p>\n</footer>\n\n<style>\n /* */\n</style>\n```\n\n```ts fileName=\"src/routes/[[locale=locale]]/+page.ts\"\nexport const prerender = true;\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+page.svelte\"\n<script lang=\"ts\">\n\timport { useIntlayer } from \"svelte-intlayer\";\n\n\t// Utiliser le dictionnaire de contenu de la page d'accueil\n\tconst homeContent = useIntlayer('home');\n</script>\n\n<svelte:head>\n\t<title>{$homeContent.title.value}\n\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n\n\n```\n\n### (Optionnel) Étape 8 : Liens internationalisés\n\nPour le SEO, il est recommandé de préfixer vos routes avec la locale (par exemple, `/en/about`, `/fr/about`). Ce composant préfixe automatiquement tout lien avec la locale courante.\n\n```svelte fileName=\"src/lib/components/LocalizedLink.svelte\"\n\n\n\n \n\n```\n\nSi vous utilisez `goto` de SvelteKit, vous pouvez utiliser la même logique avec `getLocalizedUrl` pour naviguer vers l'URL localisée :\n\n```typescript\nimport { goto } from \"$app/navigation\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { useLocale } from \"svelte-intlayer\";\n\nconst { locale } = useLocale();\nconst localizedPath = getLocalizedUrl(\"/about\", $locale);\ngoto(localizedPath); // Navigue vers /en/about ou /fr/about selon la locale\n```\n\n### (Optionnel) Étape 9 : Sélecteur de langue\n\nPour permettre aux utilisateurs de changer de langue, mettez à jour l’URL.\n\n```svelte fileName=\"src/lib/components/LanguageSwitcher.svelte\"\n\n\n

\n {\n e.preventDefault();\n setLocale(localeEl); // Va définir la locale dans le store et déclencher onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n\n```\n\n### (Optionnel) Étape 10 : Ajouter un proxy backend\n\nPour ajouter un proxy backend à votre application SvelteKit, vous pouvez utiliser la fonction `intlayerProxy` fournie par le plugin `vite-intlayer`. Ce plugin détectera automatiquement la meilleure locale pour l'utilisateur en fonction de l'URL, des cookies et des préférences linguistiques du navigateur.\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerProxy } from \"vite-intlayer\";\nimport { sveltekit } from \"@sveltejs/kit/vite\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n intlayerProxy(), // should be placed first\n intlayer(),\n sveltekit(),\n ],],\n});\n```\n\n### (Optionnel) Étape 11 : Configurer l'éditeur / CMS intlayer\n\nPour configurer l'éditeur intlayer, vous devez suivre la [documentation de l'éditeur intlayer](/fr/doc/concept/editor).\n\nPour configurer le CMS intlayer, vous devez suivre la [documentation du CMS intlayer](/fr/doc/concept/cms).\n\nPour pouvoir visualiser le sélecteur de l'éditeur intlayer, vous devrez utiliser la syntaxe composant dans votre contenu intlayer.\n\n```svelte fileName=\"Component.svelte\"\n\n\n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### (Optionnel) Étape 12 : Extraire le contenu de vos composants\n\nSi vous avez une base de code existante, transformer des milliers de fichiers peut prendre beaucoup de temps.\n\nPour faciliter ce processus, Intlayer propose un [compilateur](/fr/doc/compiler) / [extracteur](/fr/doc/concept/cli/extract) pour transformer vos composants et extraire le contenu.\n\nPour le configurer, vous pouvez ajouter une section `compiler` dans votre fichier `intlayer.config.ts` :\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Reste de votre configuration\n compiler: {\n /**\n * Indique si le compilateur doit être activé.\n */\n enabled: true,\n\n /**\n * Définit le chemin des fichiers de sortie\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Indique si les composants doivent être sauvegardés après avoir été transformés. De cette façon, le compilateur peut être exécuté une seule fois pour transformer l'application, puis il peut être supprimé.\n */\n saveComponents: false,\n\n /**\n * Préfixe de clé de dictionnaire\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nExécutez l'extracteur pour transformer vos composants et extraire le contenu\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\nMettez à jour votre fichier `vite.config.ts` pour inclure le plugin `intlayerCompiler` :\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // Ajoute le plugin du compilateur\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Ou npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Ou pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Ou yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n### Configuration Git\n\nIl est recommandé d'ignorer les fichiers générés par Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# Ignorer les fichiers générés par Intlayer\n.intlayer\n```\n\n---\n\n### Aller plus loin\n\nPour pouvoir visualiser le sélecteur de l'éditeur intlayer, vous devrez utiliser la syntaxe composant dans votre contenu intlayer.\n\n```svelte fileName=\"Component.svelte\"\n\n\n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### Configuration Git\n\nIl est recommandé d'ignorer les fichiers générés par Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# Ignorer les fichiers générés par Intlayer\n.intlayer\n```\n\n---\n\n### Aller plus loin\n\n- **Éditeur Visuel** : Intégrez l'[Éditeur Visuel Intlayer](/fr/doc/concept/editor) pour éditer les traductions directement depuis l'interface utilisateur.\n- **CMS** : Externalisez la gestion de votre contenu en utilisant le [CMS Intlayer](/fr/doc/concept/cms).\n","about":"Découvrez comment rendre votre site SvelteKit multilingue. Suivez la documentation pour internationaliser (i18n) et traduire votre site en utilisant le Server-Side Rendering (SSR).","url":"https://intlayer.org/fr/doc/environment/sveltekit","datePublished":"20-11-2025","dateModified":"06-05-2026","keywords":"Internationalisation, Documentation, Intlayer, SvelteKit, JavaScript, SSR","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Développeurs, Responsables de contenu"}}

Création:2025-11-20Dernière mise à jour:2026-05-06

Voir le modèle d'application sur GitHub

Cette page dispose d'un modèle d'application disponible.

Voir l'application vitrine

Cette page renvoie vers une démo en direct du modèle.

Référencez cette doc à votre assistant AI préféré

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix

Historique des versions

"Mettre à jour l'utilisation de l'API useIntlayer de Solid pour un accès direct aux propriétés"
v8.9.004/05/2026
"Ajouter la commande init"
v7.5.930/12/2025
"Historique initial"
v7.1.1020/11/2025

Le contenu de cette page a été traduit à l'aide d'une IA.

Voir la dernière version du contenu original en anglais

Modifier cette documentation

Si vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.

Lien GitHub de la documentation

Copier

Copier le Markdown du doc dans le presse-papiers

Traduisez votre site SvelteKit avec Intlayer | Internationalisation (i18n)

ide.intlayer.org

Table des matières

Qu'est-ce que Intlayer ?

Intlayer est une bibliothèque d'internationalisation (i18n) innovante et open-source conçue pour simplifier la prise en charge multilingue dans les applications web modernes. Elle fonctionne parfaitement avec les capacités de Server-Side Rendering (SSR) de SvelteKit.

Avec Intlayer, vous pouvez :

Gérer facilement les traductions en utilisant des dictionnaires déclaratifs au niveau des composants.
Localiser dynamiquement les métadonnées, les routes et le contenu.
Assurer la prise en charge de TypeScript avec des types générés automatiquement.
Exploiter le SSR de SvelteKit pour une internationalisation optimisée pour le SEO.

Guide étape par étape pour configurer Intlayer dans une application SvelteKit

Pour commencer, créez un nouveau projet SvelteKit. Voici la structure finale que nous allons réaliser :

bash

Copier le code

Copier le code dans le presse-papiers

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

Étape 1 : Installer les dépendances

Installez les paquets nécessaires en utilisant npm :

bash

Copier le code

Copier le code dans le presse-papiers

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer : Le paquet principal pour l'internationalisation (i18n).
svelte-intlayer : Fournit des context providers et des stores pour Svelte/SvelteKit.
vite-intlayer : Le plugin Vite pour intégrer les déclarations de contenu dans le processus de build.

Étape 2 : Configuration de votre projet

Créez un fichier de configuration à la racine de votre projet :

intlayer.config.ts

Copier le code

Copier le code dans le presse-papiers

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

Étape 3 : Intégrer Intlayer dans votre configuration Vite

Mettez à jour votre fichier vite.config.ts pour inclure le plugin Intlayer. Ce plugin gère la transpilation de vos fichiers de contenu.

vite.config.ts

Copier le code

Copier le code dans le presse-papiers

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // l'ordre est important, Intlayer doit être placé avant SvelteKit});

Étape 4 : Déclarez votre contenu

Créez vos fichiers de déclaration de contenu n'importe où dans votre dossier src (par exemple, src/lib/content ou à côté de vos composants). Ces fichiers définissent le contenu traduisible pour votre application en utilisant la fonction t() pour chaque locale.

Étape 5 : Utilisez Intlayer dans vos composants

Vous pouvez maintenant utiliser la fonction useIntlayer dans n'importe quel composant Svelte. Elle retourne un store réactif qui se met automatiquement à jour lorsque la locale change. La fonction respecte automatiquement la locale courante (à la fois lors du SSR et de la navigation côté client).

Note : useIntlayer retourne un store Svelte, vous devez donc utiliser le préfixe `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Comment traduire votre application SvelteKit in i18n 2026 description: Découvrez comment rendre votre site SvelteKit multilingue. Suivez la documentation pour internationaliser (i18n) et traduire votre site en utilisant le Server-Side Rendering (SSR). keywords:

Internationalisation
Documentation
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: Historique initial

Traduisez votre site SvelteKit avec Intlayer | Internationalisation (i18n)

Table des matières

Qu'est-ce que Intlayer ?

Avec Intlayer, vous pouvez :

Gérer facilement les traductions en utilisant des dictionnaires déclaratifs au niveau des composants.
Localiser dynamiquement les métadonnées, les routes et le contenu.
Assurer la prise en charge de TypeScript avec des types générés automatiquement.
Exploiter le SSR de SvelteKit pour une internationalisation optimisée pour le SEO.

Guide étape par étape pour configurer Intlayer dans une application SvelteKit

Pour commencer, créez un nouveau projet SvelteKit. Voici la structure finale que nous allons réaliser :

bash

Copier le code

Copier le code dans le presse-papiers

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

Étape 1 : Installer les dépendances

Installez les paquets nécessaires en utilisant npm :

bash

Copier le code

Copier le code dans le presse-papiers

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer : Le paquet principal pour l'internationalisation (i18n).
svelte-intlayer : Fournit des context providers et des stores pour Svelte/SvelteKit.
vite-intlayer : Le plugin Vite pour intégrer les déclarations de contenu dans le processus de build.

Étape 2 : Configuration de votre projet

Créez un fichier de configuration à la racine de votre projet :

intlayer.config.ts

Copier le code

Copier le code dans le presse-papiers

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

Étape 3 : Intégrer Intlayer dans votre configuration Vite

Mettez à jour votre fichier vite.config.ts pour inclure le plugin Intlayer. Ce plugin gère la transpilation de vos fichiers de contenu.

vite.config.ts

Copier le code

Copier le code dans le presse-papiers

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // l'ordre est important, Intlayer doit être placé avant SvelteKit});

Étape 4 : Déclarez votre contenu

Étape 5 : Utilisez Intlayer dans vos composants

pour accéder à sa valeur réactive (par exemple, $content.title).

src/lib/components/Component.svelte

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" correspond à la clé définie à l'Étape 4  const content = useIntlayer("hero-section");</script><!-- Afficher le contenu comme contenu simple  --><h1>{$content.title}</h1><!-- Pour rendre le contenu éditable via l'éditeur --><h1>{@const Title = $content.title}<Title /></h1><!-- Pour afficher le contenu en tant que chaîne --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Optionnel) Étape 6 : Configurer le routage

Les étapes suivantes montrent comment configurer un routage basé sur la locale dans SvelteKit. Cela permet à vos URLs d'inclure le préfixe de la locale (par exemple, /en/about, /fr/about) pour un meilleur SEO et une meilleure expérience utilisateur.

bash

Copier le code

Copier le code dans le presse-papiers

.└─── src    ├── app.d.ts                  # Définir le type de la locale    ├── hooks.server.ts           # Gérer le routage des locales    ├── lib    │   └── getLocale.ts          # Vérifier la locale depuis l'en-tête, les cookies    ├── params    │   └── locale.ts             # Définir le paramètre locale    └── routes        ├── [[locale=locale]]     # Encapsuler dans un groupe de routes pour définir la locale        │   ├── +layout.svelte    # Mise en page locale pour la route        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Mise en page racine pour les polices et styles globaux

Étape 7 : Gérer la détection de la locale côté serveur (Hooks)

Dans SvelteKit, le serveur doit connaître la locale de l'utilisateur pour rendre le contenu correct lors du SSR. Nous utilisons hooks.server.ts pour détecter la locale à partir de l'URL ou des cookies.

Créez ou modifiez src/hooks.server.ts :

src/hooks.server.ts

Copier le code

Copier le code dans le presse-papiers

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);  // Vérifie si le chemin actuel commence déjà par une locale (ex. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Si AUCUNE locale n'est présente dans l'URL (ex. l'utilisateur visite "/"), redirigez-le  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Redirection temporaire    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Ensuite, créez un helper pour obtenir la locale de l'utilisateur à partir de l'événement de requête :

src/lib/getLocale.ts

Copier le code

Copier le code dans le presse-papiers

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Récupère la locale de l'utilisateur à partir de l'événement de requête. * Cette fonction est utilisée dans le hook `handle` dans `src/hooks.server.ts`. * * Elle tente d'abord d'obtenir la locale depuis le stockage Intlayer (cookies ou en-têtes personnalisés). * Si la locale n'est pas trouvée, elle revient à la négociation "Accept-Language" du navigateur. * * @param event - L'événement de requête de SvelteKit * @returns La locale de l'utilisateur */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Tente d'obtenir la locale depuis le stockage Intlayer (cookies ou en-têtes)  const storedLocale = getLocaleFromStorage({    // Accès aux cookies SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Accès aux headers SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Repli sur la négociation "Accept-Language" du navigateur  const negotiatorHeaders: Record<string, string> = {};  // Conversion de l'objet Headers de SvelteKit en un Record<string, string> simple  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Vérification de la locale à partir du header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Retourne la locale par défaut si aucune correspondance n'est trouvée  return defaultLocale;};

getLocaleFromStorage vérifiera la locale à partir de l'en-tête ou du cookie selon votre configuration. Voir Configuration pour plus de détails.

La fonction localeDetector traitera l'en-tête Accept-Language et retournera la meilleure correspondance.

Si la locale n'est pas configurée, nous souhaitons retourner une erreur 404. Pour faciliter cela, nous pouvons créer une fonction match pour vérifier si la locale est valide :

/src/params/locale.ts

Copier le code

Copier le code dans le presse-papiers

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

Note : Assurez-vous que votre fichier src/app.d.ts inclut la définition de la locale :
typescript
Copier le code
Copier le code dans le presse-papiers
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Pour le fichier +layout.svelte, nous pouvons tout supprimer afin de ne conserver que le contenu statique, non lié à l’i18n :

src/+layout.svelte

Copier le code

Copier le code dans le presse-papiers

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

Ensuite, créez une nouvelle page et un layout sous le groupe [[locale=locale]] :

src/routes/[[locale=locale]]/+layout.ts

Copier le code

Copier le code dans le presse-papiers

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Utilisez le type générique Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

Copier le code

Copier le code dans le presse-papiers

<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();    // Initialiser Intlayer avec la locale provenant de la route  $effect(() => {      setupIntlayer(data.locale);  });    // Utiliser le dictionnaire de contenu du layout    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

Copier le code

Copier le code dans le presse-papiers

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Utiliser le dictionnaire de contenu de la page d'accueil    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Optionnel) Étape 8 : Liens internationalisés

Pour le SEO, il est recommandé de préfixer vos routes avec la locale (par exemple, /en/about, /fr/about). Ce composant préfixe automatiquement tout lien avec la locale courante.

src/lib/components/LocalizedLink.svelte

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Aide pour préfixer l'URL avec la locale courante  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Si vous utilisez goto de SvelteKit, vous pouvez utiliser la même logique avec getLocalizedUrl pour naviguer vers l'URL localisée :

typescript

Copier le code

Copier le code dans le presse-papiers

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Navigue vers /en/about ou /fr/about selon la locale

(Optionnel) Étape 9 : Sélecteur de langue

Pour permettre aux utilisateurs de changer de langue, mettez à jour l’URL.

src/lib/components/LanguageSwitcher.svelte

Copier le code

Copier le code dans le presse-papiers

<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); // Va définir la locale dans le store et déclencher onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Optionnel) Étape 10 : Ajouter un proxy backend

Pour ajouter un proxy backend à votre application SvelteKit, vous pouvez utiliser la fonction intlayerProxy fournie par le plugin vite-intlayer. Ce plugin détectera automatiquement la meilleure locale pour l'utilisateur en fonction de l'URL, des cookies et des préférences linguistiques du navigateur.

vite.config.ts

Copier le code

Copier le code dans le presse-papiers

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

(Optionnel) Étape 11 : Configurer l'éditeur / CMS intlayer

Pour configurer l'éditeur intlayer, vous devez suivre la documentation de l'éditeur intlayer.

Pour configurer le CMS intlayer, vous devez suivre la documentation du CMS intlayer.

Pour pouvoir visualiser le sélecteur de l'éditeur intlayer, vous devrez utiliser la syntaxe composant dans votre contenu intlayer.

Component.svelte

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Rendre le contenu comme contenu simple -->  <h1>{$content.title}</h1>  <!-- Rendre le contenu comme un composant (requis par l'éditeur) -->  {@const Component = $content.component}<Component /></div>

(Optionnel) Étape 12 : Extraire le contenu de vos composants

Si vous avez une base de code existante, transformer des milliers de fichiers peut prendre beaucoup de temps.

Pour faciliter ce processus, Intlayer propose un compilateur / extracteur pour transformer vos composants et extraire le contenu.

Pour le configurer, vous pouvez ajouter une section compiler dans votre fichier intlayer.config.ts :

intlayer.config.ts

Copier le code

Copier le code dans le presse-papiers

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Reste de votre configuration
  compiler: {
    /**
     * Indique si le compilateur doit être activé.
     */
    enabled: true,

    /**
     * Définit le chemin des fichiers de sortie
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Indique si les composants doivent être sauvegardés après avoir été transformés. De cette façon, le compilateur peut être exécuté une seule fois pour transformer l'application, puis il peut être supprimé.
     */
    saveComponents: false,

    /**
     * Préfixe de clé de dictionnaire
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Exécutez l'extracteur pour transformer vos composants et extraire le contenu

bash

Copier le code

Copier le code dans le presse-papiers

npx intlayer extract

Mettez à jour votre fichier vite.config.ts pour inclure le plugin intlayerCompiler :

vite.config.ts

Copier le code

Copier le code dans le presse-papiers

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Ajoute le plugin du compilateur ],});

bash

Copier le code

Copier le code dans le presse-papiers

npm run build # Ou npm run dev

Configuration Git

Il est recommandé d'ignorer les fichiers générés par Intlayer.

.gitignore

Copier le code

Copier le code dans le presse-papiers

# Ignorer les fichiers générés par Intlayer.intlayer

Aller plus loin

Pour pouvoir visualiser le sélecteur de l'éditeur intlayer, vous devrez utiliser la syntaxe composant dans votre contenu intlayer.

Component.svelte

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Rendre le contenu comme un contenu simple -->  <h1>{$content.title}</h1>  <!-- Rendre le contenu comme un composant (requis par l'éditeur) -->  {@const Component = $content.component}<Component /></div>

Configuration Git

Il est recommandé d'ignorer les fichiers générés par Intlayer.

.gitignore

Copier le code

Copier le code dans le presse-papiers

# Ignorer les fichiers générés par Intlayer.intlayer

Aller plus loin

Éditeur Visuel : Intégrez l'Éditeur Visuel Intlayer pour éditer les traductions directement depuis l'interface utilisateur.
CMS : Externalisez la gestion de votre contenu en utilisant le CMS Intlayer.

Vite et Svelte

Vite et Preact

\n\n\n

{$content.title}

\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n {\n e.preventDefault();\n setLocale(localeEl); // Va définir la locale dans le store et déclencher onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

Création:2025-11-20Dernière mise à jour:2026-05-06

Voir le modèle d'application sur GitHub

Cette page dispose d'un modèle d'application disponible.

Voir l'application vitrine

Cette page renvoie vers une démo en direct du modèle.

Référencez cette doc à votre assistant AI préféré

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix

Historique des versions

"Mettre à jour l'utilisation de l'API useIntlayer de Solid pour un accès direct aux propriétés"
v8.9.004/05/2026
"Ajouter la commande init"
v7.5.930/12/2025
"Historique initial"
v7.1.1020/11/2025

Le contenu de cette page a été traduit à l'aide d'une IA.

Voir la dernière version du contenu original en anglais

Modifier cette documentation

Si vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.

Lien GitHub de la documentation

Copier

Copier le Markdown du doc dans le presse-papiers

Traduisez votre site SvelteKit avec Intlayer | Internationalisation (i18n)

ide.intlayer.org

Table des matières

Qu'est-ce que Intlayer ?

Avec Intlayer, vous pouvez :

Gérer facilement les traductions en utilisant des dictionnaires déclaratifs au niveau des composants.
Localiser dynamiquement les métadonnées, les routes et le contenu.
Assurer la prise en charge de TypeScript avec des types générés automatiquement.
Exploiter le SSR de SvelteKit pour une internationalisation optimisée pour le SEO.

Guide étape par étape pour configurer Intlayer dans une application SvelteKit

Pour commencer, créez un nouveau projet SvelteKit. Voici la structure finale que nous allons réaliser :

bash

Copier le code

Copier le code dans le presse-papiers

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

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

Étape 1 : Installer les dépendances

Installez les paquets nécessaires en utilisant npm :

bash

Copier le code

Copier le code dans le presse-papiers

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer : Le paquet principal pour l'internationalisation (i18n).
svelte-intlayer : Fournit des context providers et des stores pour Svelte/SvelteKit.
vite-intlayer : Le plugin Vite pour intégrer les déclarations de contenu dans le processus de build.

Étape 2 : Configuration de votre projet

Créez un fichier de configuration à la racine de votre projet :

intlayer.config.ts

Copier le code

Copier le code dans le presse-papiers

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

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

Étape 3 : Intégrer Intlayer dans votre configuration Vite

Mettez à jour votre fichier vite.config.ts pour inclure le plugin Intlayer. Ce plugin gère la transpilation de vos fichiers de contenu.

vite.config.ts

Copier le code

Copier le code dans le presse-papiers

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // l'ordre est important, Intlayer doit être placé avant SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // l'ordre est important, Intlayer doit être placé avant SvelteKit});

Étape 4 : Déclarez votre contenu

Étape 5 : Utilisez Intlayer dans vos composants

Note : useIntlayer retourne un store Svelte, vous devez donc utiliser le préfixe `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Comment traduire votre application SvelteKit in i18n 2026 description: Découvrez comment rendre votre site SvelteKit multilingue. Suivez la documentation pour internationaliser (i18n) et traduire votre site en utilisant le Server-Side Rendering (SSR). keywords:

Internationalisation
Documentation
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: Historique initial

Traduisez votre site SvelteKit avec Intlayer | Internationalisation (i18n)

Table des matières

Qu'est-ce que Intlayer ?

Avec Intlayer, vous pouvez :

Gérer facilement les traductions en utilisant des dictionnaires déclaratifs au niveau des composants.
Localiser dynamiquement les métadonnées, les routes et le contenu.
Assurer la prise en charge de TypeScript avec des types générés automatiquement.
Exploiter le SSR de SvelteKit pour une internationalisation optimisée pour le SEO.

Guide étape par étape pour configurer Intlayer dans une application SvelteKit

Pour commencer, créez un nouveau projet SvelteKit. Voici la structure finale que nous allons réaliser :

bash

Copier le code

Copier le code dans le presse-papiers

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

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

Étape 1 : Installer les dépendances

Installez les paquets nécessaires en utilisant npm :

bash

Copier le code

Copier le code dans le presse-papiers

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer : Le paquet principal pour l'internationalisation (i18n).
svelte-intlayer : Fournit des context providers et des stores pour Svelte/SvelteKit.
vite-intlayer : Le plugin Vite pour intégrer les déclarations de contenu dans le processus de build.

Étape 2 : Configuration de votre projet

Créez un fichier de configuration à la racine de votre projet :

intlayer.config.ts

Copier le code

Copier le code dans le presse-papiers

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

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

Étape 3 : Intégrer Intlayer dans votre configuration Vite

Mettez à jour votre fichier vite.config.ts pour inclure le plugin Intlayer. Ce plugin gère la transpilation de vos fichiers de contenu.

vite.config.ts

Copier le code

Copier le code dans le presse-papiers

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // l'ordre est important, Intlayer doit être placé avant SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // l'ordre est important, Intlayer doit être placé avant SvelteKit});

Étape 4 : Déclarez votre contenu

Étape 5 : Utilisez Intlayer dans vos composants

pour accéder à sa valeur réactive (par exemple, $content.title).

src/lib/components/Component.svelte

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" correspond à la clé définie à l'Étape 4  const content = useIntlayer("hero-section");</script><!-- Afficher le contenu comme contenu simple  --><h1>{$content.title}</h1><!-- Pour rendre le contenu éditable via l'éditeur --><h1>{@const Title = $content.title}<Title /></h1><!-- Pour afficher le contenu en tant que chaîne --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" correspond à la clé définie à l'Étape 4  const content = useIntlayer("hero-section");</script><!-- Afficher le contenu comme contenu simple  --><h1>{$content.title}</h1><!-- Pour rendre le contenu éditable via l'éditeur --><h1>{@const Title = $content.title}<Title /></h1><!-- Pour afficher le contenu en tant que chaîne --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Optionnel) Étape 6 : Configurer le routage

bash

Copier le code

Copier le code dans le presse-papiers

.└─── src    ├── app.d.ts                  # Définir le type de la locale    ├── hooks.server.ts           # Gérer le routage des locales    ├── lib    │   └── getLocale.ts          # Vérifier la locale depuis l'en-tête, les cookies    ├── params    │   └── locale.ts             # Définir le paramètre locale    └── routes        ├── [[locale=locale]]     # Encapsuler dans un groupe de routes pour définir la locale        │   ├── +layout.svelte    # Mise en page locale pour la route        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Mise en page racine pour les polices et styles globaux

.└─── src    ├── app.d.ts                  # Définir le type de la locale    ├── hooks.server.ts           # Gérer le routage des locales    ├── lib    │   └── getLocale.ts          # Vérifier la locale depuis l'en-tête, les cookies    ├── params    │   └── locale.ts             # Définir le paramètre locale    └── routes        ├── [[locale=locale]]     # Encapsuler dans un groupe de routes pour définir la locale        │   ├── +layout.svelte    # Mise en page locale pour la route        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Mise en page racine pour les polices et styles globaux

Étape 7 : Gérer la détection de la locale côté serveur (Hooks)

Créez ou modifiez src/hooks.server.ts :

src/hooks.server.ts

Copier le code

Copier le code dans le presse-papiers

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);  // Vérifie si le chemin actuel commence déjà par une locale (ex. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Si AUCUNE locale n'est présente dans l'URL (ex. l'utilisateur visite "/"), redirigez-le  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Redirection temporaire    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

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);  // Vérifie si le chemin actuel commence déjà par une locale (ex. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Si AUCUNE locale n'est présente dans l'URL (ex. l'utilisateur visite "/"), redirigez-le  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Redirection temporaire    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Ensuite, créez un helper pour obtenir la locale de l'utilisateur à partir de l'événement de requête :

src/lib/getLocale.ts

Copier le code

Copier le code dans le presse-papiers

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Récupère la locale de l'utilisateur à partir de l'événement de requête. * Cette fonction est utilisée dans le hook `handle` dans `src/hooks.server.ts`. * * Elle tente d'abord d'obtenir la locale depuis le stockage Intlayer (cookies ou en-têtes personnalisés). * Si la locale n'est pas trouvée, elle revient à la négociation "Accept-Language" du navigateur. * * @param event - L'événement de requête de SvelteKit * @returns La locale de l'utilisateur */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Tente d'obtenir la locale depuis le stockage Intlayer (cookies ou en-têtes)  const storedLocale = getLocaleFromStorage({    // Accès aux cookies SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Accès aux headers SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Repli sur la négociation "Accept-Language" du navigateur  const negotiatorHeaders: Record<string, string> = {};  // Conversion de l'objet Headers de SvelteKit en un Record<string, string> simple  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Vérification de la locale à partir du header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Retourne la locale par défaut si aucune correspondance n'est trouvée  return defaultLocale;};

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Récupère la locale de l'utilisateur à partir de l'événement de requête. * Cette fonction est utilisée dans le hook `handle` dans `src/hooks.server.ts`. * * Elle tente d'abord d'obtenir la locale depuis le stockage Intlayer (cookies ou en-têtes personnalisés). * Si la locale n'est pas trouvée, elle revient à la négociation "Accept-Language" du navigateur. * * @param event - L'événement de requête de SvelteKit * @returns La locale de l'utilisateur */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Tente d'obtenir la locale depuis le stockage Intlayer (cookies ou en-têtes)  const storedLocale = getLocaleFromStorage({    // Accès aux cookies SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Accès aux headers SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Repli sur la négociation "Accept-Language" du navigateur  const negotiatorHeaders: Record<string, string> = {};  // Conversion de l'objet Headers de SvelteKit en un Record<string, string> simple  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Vérification de la locale à partir du header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Retourne la locale par défaut si aucune correspondance n'est trouvée  return defaultLocale;};

getLocaleFromStorage vérifiera la locale à partir de l'en-tête ou du cookie selon votre configuration. Voir Configuration pour plus de détails.

La fonction localeDetector traitera l'en-tête Accept-Language et retournera la meilleure correspondance.

Si la locale n'est pas configurée, nous souhaitons retourner une erreur 404. Pour faciliter cela, nous pouvons créer une fonction match pour vérifier si la locale est valide :

/src/params/locale.ts

Copier le code

Copier le code dans le presse-papiers

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

Note : Assurez-vous que votre fichier src/app.d.ts inclut la définition de la locale :
typescript
Copier le code
Copier le code dans le presse-papiers
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Pour le fichier +layout.svelte, nous pouvons tout supprimer afin de ne conserver que le contenu statique, non lié à l’i18n :

src/+layout.svelte

Copier le code

Copier le code dans le presse-papiers

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

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

Ensuite, créez une nouvelle page et un layout sous le groupe [[locale=locale]] :

src/routes/[[locale=locale]]/+layout.ts

Copier le code

Copier le code dans le presse-papiers

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Utilisez le type générique Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Utilisez le type générique Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

Copier le code

Copier le code dans le presse-papiers

<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();    // Initialiser Intlayer avec la locale provenant de la route  $effect(() => {      setupIntlayer(data.locale);  });    // Utiliser le dictionnaire de contenu du layout    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>

<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();    // Initialiser Intlayer avec la locale provenant de la route  $effect(() => {      setupIntlayer(data.locale);  });    // Utiliser le dictionnaire de contenu du layout    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

Copier le code

Copier le code dans le presse-papiers

export const prerender = true;

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Utiliser le dictionnaire de contenu de la page d'accueil    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Utiliser le dictionnaire de contenu de la page d'accueil    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Optionnel) Étape 8 : Liens internationalisés

Pour le SEO, il est recommandé de préfixer vos routes avec la locale (par exemple, /en/about, /fr/about). Ce composant préfixe automatiquement tout lien avec la locale courante.

src/lib/components/LocalizedLink.svelte

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Aide pour préfixer l'URL avec la locale courante  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Aide pour préfixer l'URL avec la locale courante  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Si vous utilisez goto de SvelteKit, vous pouvez utiliser la même logique avec getLocalizedUrl pour naviguer vers l'URL localisée :

typescript

Copier le code

Copier le code dans le presse-papiers

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Navigue vers /en/about ou /fr/about selon la locale

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Navigue vers /en/about ou /fr/about selon la locale

(Optionnel) Étape 9 : Sélecteur de langue

Pour permettre aux utilisateurs de changer de langue, mettez à jour l’URL.

src/lib/components/LanguageSwitcher.svelte

Copier le code

Copier le code dans le presse-papiers

<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); // Va définir la locale dans le store et déclencher onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

<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); // Va définir la locale dans le store et déclencher onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Optionnel) Étape 10 : Ajouter un proxy backend

vite.config.ts

Copier le code

Copier le code dans le presse-papiers

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

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

(Optionnel) Étape 11 : Configurer l'éditeur / CMS intlayer

Pour configurer l'éditeur intlayer, vous devez suivre la documentation de l'éditeur intlayer.

Pour configurer le CMS intlayer, vous devez suivre la documentation du CMS intlayer.

Pour pouvoir visualiser le sélecteur de l'éditeur intlayer, vous devrez utiliser la syntaxe composant dans votre contenu intlayer.

Component.svelte

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Rendre le contenu comme contenu simple -->  <h1>{$content.title}</h1>  <!-- Rendre le contenu comme un composant (requis par l'éditeur) -->  {@const Component = $content.component}<Component /></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Rendre le contenu comme contenu simple -->  <h1>{$content.title}</h1>  <!-- Rendre le contenu comme un composant (requis par l'éditeur) -->  {@const Component = $content.component}<Component /></div>

(Optionnel) Étape 12 : Extraire le contenu de vos composants

Si vous avez une base de code existante, transformer des milliers de fichiers peut prendre beaucoup de temps.

Pour faciliter ce processus, Intlayer propose un compilateur / extracteur pour transformer vos composants et extraire le contenu.

Pour le configurer, vous pouvez ajouter une section compiler dans votre fichier intlayer.config.ts :

intlayer.config.ts

Copier le code

Copier le code dans le presse-papiers

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Reste de votre configuration
  compiler: {
    /**
     * Indique si le compilateur doit être activé.
     */
    enabled: true,

    /**
     * Définit le chemin des fichiers de sortie
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Indique si les composants doivent être sauvegardés après avoir été transformés. De cette façon, le compilateur peut être exécuté une seule fois pour transformer l'application, puis il peut être supprimé.
     */
    saveComponents: false,

    /**
     * Préfixe de clé de dictionnaire
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Exécutez l'extracteur pour transformer vos composants et extraire le contenu

bash

Copier le code

Copier le code dans le presse-papiers

npx intlayer extract

npx intlayer extract

Mettez à jour votre fichier vite.config.ts pour inclure le plugin intlayerCompiler :

vite.config.ts

Copier le code

Copier le code dans le presse-papiers

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Ajoute le plugin du compilateur ],});

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Ajoute le plugin du compilateur ],});

bash

Copier le code

Copier le code dans le presse-papiers

npm run build # Ou npm run dev

npm run build # Ou npm run dev

Configuration Git

Il est recommandé d'ignorer les fichiers générés par Intlayer.

.gitignore

Copier le code

Copier le code dans le presse-papiers

# Ignorer les fichiers générés par Intlayer.intlayer

# Ignorer les fichiers générés par Intlayer.intlayer

Aller plus loin

Pour pouvoir visualiser le sélecteur de l'éditeur intlayer, vous devrez utiliser la syntaxe composant dans votre contenu intlayer.

Component.svelte

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Rendre le contenu comme un contenu simple -->  <h1>{$content.title}</h1>  <!-- Rendre le contenu comme un composant (requis par l'éditeur) -->  {@const Component = $content.component}<Component /></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Rendre le contenu comme un contenu simple -->  <h1>{$content.title}</h1>  <!-- Rendre le contenu comme un composant (requis par l'éditeur) -->  {@const Component = $content.component}<Component /></div>

Configuration Git

Il est recommandé d'ignorer les fichiers générés par Intlayer.

.gitignore

Copier le code

Copier le code dans le presse-papiers

# Ignorer les fichiers générés par Intlayer.intlayer

# Ignorer les fichiers générés par Intlayer.intlayer

Aller plus loin

Éditeur Visuel : Intégrez l'Éditeur Visuel Intlayer pour éditer les traductions directement depuis l'interface utilisateur.
CMS : Externalisez la gestion de votre contenu en utilisant le CMS Intlayer.

Vite et Svelte

Vite et Preact