\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### (Opsional) Langkah 6: Atur routing\n\nLangkah-langkah berikut menunjukkan cara mengatur routing berbasis locale di SvelteKit. Ini memungkinkan URL Anda menyertakan prefix locale (misalnya, `/en/about`, `/fr/about`) untuk SEO yang lebih baik dan pengalaman pengguna yang lebih baik.\n\n```bash\n.\n└─── src\n ├── app.d.ts # Mendefinisikan tipe locale\n ├── hooks.server.ts # Mengelola routing locale\n ├── lib\n │ └── getLocale.ts # Memeriksa locale dari header, cookies\n ├── params\n │ └── locale.ts # Mendefinisikan parameter locale\n └── routes\n ├── [[locale=locale]] # Bungkus dalam grup route untuk mengatur locale\n │ ├── +layout.svelte # Tata letak lokal untuk rute\n │ ├── +layout.ts\n │ ├── +page.svelte\n │ ├── +page.ts\n │ └── about\n │ ├── +page.svelte\n │ └── +page.ts\n └── +layout.svelte # Tata letak root untuk font dan gaya global\n```\n\n### Langkah 7: Tangani Deteksi Locale di Server (Hooks)\n\nDi SvelteKit, server perlu mengetahui locale pengguna untuk merender konten yang benar selama SSR. Kita menggunakan `hooks.server.ts` untuk mendeteksi locale dari URL atau cookie.\n\nBuat atau modifikasi `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 // Periksa apakah path saat ini sudah diawali dengan locale (misal /fr, /en)\n const pathname = event.url.pathname;\n const targetPathname = getLocalizedUrl(pathname, detectedLocale);\n\n // Jika TIDAK ada locale dalam URL (misal pengguna mengunjungi \"/\"), arahkan ulang mereka\n if (targetPathname !== pathname) {\n return new Response(undefined, {\n headers: { Location: targetPathname },\n status: 307, // Redirect sementara\n });\n }\n\n return resolve(event, {\n transformPageChunk: ({ html }) => html.replace(\"%lang%\", detectedLocale),\n });\n};\n```\n\nKemudian, buat helper untuk mendapatkan locale pengguna dari event request:\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 * Mendapatkan locale pengguna dari event request.\n * Fungsi ini digunakan dalam hook `handle` di `src/hooks.server.ts`.\n *\n * Pertama-tama mencoba mendapatkan locale dari penyimpanan Intlayer (cookies atau header khusus).\n * Jika locale tidak ditemukan, maka menggunakan fallback negosiasi \"Accept-Language\" dari browser.\n *\n * @param event - Event request dari SvelteKit\n * @returns Locale pengguna\n */\nexport const getLocale = (event: RequestEvent): Locale => {\n const defaultLocale = configuration?.internationalization?.defaultLocale;\n\n // Mencoba mendapatkan locale dari penyimpanan Intlayer (Cookies atau header)\n const storedLocale = getLocaleFromStorage({\n // Akses cookie SvelteKit\n getCookie: (name: string) => event.cookies.get(name) ?? null,\n // Akses header SvelteKit\n getHeader: (name: string) => event.request.headers.get(name) ?? null,\n });\n\n if (storedLocale) {\n return storedLocale;\n }\n\n // Cadangan ke negosiasi \"Accept-Language\" browser\n const negotiatorHeaders: Record<string, string> = {};\n\n // Mengonversi objek Headers SvelteKit menjadi Record<string, string> biasa\n event.request.headers.forEach((value, key) => {\n negotiatorHeaders[key] = value;\n });\n\n // Periksa locale dari header `Accept-Language`\n const userFallbackLocale = localeDetector(negotiatorHeaders);\n\n if (userFallbackLocale) {\n return userFallbackLocale;\n }\n\n // Kembalikan locale default jika tidak ada yang cocok ditemukan\n return defaultLocale;\n};\n```\n\n> `getLocaleFromStorage` akan memeriksa locale dari header atau cookie tergantung pada konfigurasi Anda. Lihat [Configuration](https://intlayer.org/doc/configuration) untuk detail lebih lanjut.\n\n> Fungsi `localeDetector` akan memproses header `Accept-Language` dan mengembalikan kecocokan terbaik.\n\nJika locale tidak dikonfigurasi, kita ingin mengembalikan error 404. Untuk mempermudah, kita dapat membuat fungsi `match` untuk memeriksa apakah locale valid:\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> **Catatan:** Pastikan `src/app.d.ts` Anda menyertakan definisi locale:\n>\n> ```typescript\n> declare global {\n> namespace App {\n> interface Locals {\n> locale: import(\"intlayer\").Locale;\n> }\n> }\n> }\n> ```\n\nUntuk file `+layout.svelte`, kita dapat menghapus semuanya, agar hanya menyimpan konten statis yang tidak terkait dengan 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\nKemudian, buat halaman dan layout baru di bawah grup `[[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// Gunakan tipe Load generik\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// Inisialisasi Intlayer dengan locale dari route\n $effect(() => {\n setupIntlayer(data.locale);\n });\n\t// Gunakan kamus konten 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// Gunakan kamus konten home\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### (Opsional) Langkah 8: Tautan Internasionalisasi\n\nUntuk SEO, disarankan untuk menambahkan prefix locale pada rute Anda (misalnya, `/en/about`, `/fr/about`). Komponen ini secara otomatis menambahkan prefix locale saat ini pada setiap tautan.\n\n```svelte fileName=\"src/lib/components/LocalizedLink.svelte\"\n\n\n\n \n\n```\n\nJika Anda menggunakan `goto` dari SvelteKit, Anda dapat menggunakan logika yang sama dengan `getLocalizedUrl` untuk menavigasi ke URL yang sudah dilokalkan:\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); // Menavigasi ke /en/about atau /fr/about tergantung locale\n```\n\n### (Opsional) Langkah 9: Pengalih Bahasa\n\nUntuk memungkinkan pengguna mengganti bahasa, perbarui URL.\n\n```svelte fileName=\"src/lib/components/LanguageSwitcher.svelte\"\n\n\n

\n {\n e.preventDefault();\n setLocale(localeEl); // Akan mengatur locale di store dan memicu onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n\n```\n\n### (Opsional) Langkah 10: Tambahkan proxy backend\n\nUntuk menambahkan proxy backend ke aplikasi SvelteKit Anda, Anda dapat menggunakan fungsi `intlayerProxy` yang disediakan oleh plugin `vite-intlayer`. Plugin ini akan secara otomatis mendeteksi locale terbaik untuk pengguna berdasarkan URL, cookie, dan preferensi bahasa browser.\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### (Opsional) Langkah 11: Mengatur editor / CMS intlayer\n\nUntuk mengatur editor intlayer, Anda harus mengikuti [dokumentasi editor intlayer](/id/doc/concept/editor).\n\nUntuk mengatur CMS intlayer, Anda harus mengikuti [dokumentasi CMS intlayer](/id/doc/concept/cms).\n\nUntuk dapat memvisualisasikan selector editor intlayer, Anda harus menggunakan sintaks komponen dalam konten intlayer Anda.\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### Konfigurasi Git\n\nDisarankan untuk mengabaikan file-file yang dihasilkan oleh Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# Abaikan file-file yang dihasilkan oleh Intlayer\n.intlayer\n```\n\n---\n\n### (Opsional) Langkah 1 : Ekstrak konten komponen Anda\n\nJika Anda memiliki basis kode yang ada, mengubah ribuan file bisa memakan waktu lama.\n\nUntuk memudahkan proses ini, Intlayer mengusulkan [compiler](/id/doc/compiler) / [extractor](/id/doc/concept/cli/extract) untuk mengubah komponen Anda dan mengekstrak kontennya.\n\nUntuk mengaturnya, Anda dapat menambahkan bagian `compiler` di file `intlayer.config.ts` Anda:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Sisa konfigurasi Anda\n compiler: {\n /**\n * Menunjukkan apakah compiler harus diaktifkan.\n */\n enabled: true,\n\n /**\n * Menentukan jalur file output\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Menunjukkan apakah komponen harus disimpan setelah diubah. Dengan begitu, compiler dapat dijalankan satu kali saja untuk mengubah aplikasi, lalu dapat dihapus.\n */\n saveComponents: false,\n\n /**\n * Prefiks kunci kamus\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nJalankan extractor untuk mengubah komponen Anda dan mengekstrak kontennya\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\nPerbarui `vite.config.ts` Anda untuk menyertakan 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(), // Menambahkan plugin compiler\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Atau npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Or pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Or yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n### Melangkah Lebih Jauh\n\n- **Editor Visual**: Integrasikan [Intlayer Visual Editor](/id/doc/concept/editor) untuk mengedit terjemahan langsung dari UI.\n- **CMS**: Eksternalisasi manajemen konten Anda menggunakan [Intlayer CMS](/id/doc/concept/cms).\n","about":"Temukan cara membuat situs web SvelteKit Anda menjadi multibahasa. Ikuti dokumentasi untuk melakukan internasionalisasi (i18n) dan menerjemahkannya menggunakan Server-Side Rendering (SSR).","url":"https://intlayer.org/id/doc/environment/sveltekit","datePublished":"20-11-2025","dateModified":"06-05-2026","keywords":"Internasionalisasi, Dokumentasi, Intlayer, SvelteKit, JavaScript, SSR","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Pengembang, Manajer Konten"}}

Dibuat:2025-11-20Terakhir diperbarui:2026-05-06

Lihat template aplikasi di GitHub

Halaman ini memiliki template aplikasi yang tersedia.

Lihat aplikasi showcase

Halaman ini menautkan ke demo langsung template.

Referensikan dokumen ini ke asisten AI favorit Anda

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Ajukan pertanyaan Anda dan dapatkan ringkasan dokumen dengan merujuk halaman ini dan penyedia AI pilihan Anda

Riwayat Versi

"Perbarui penggunaan API useIntlayer Solid ke akses properti langsung"
v8.9.04/5/2026
"Tambahkan perintah init"
v7.5.930/12/2025
"Inisialisasi riwayat"
v7.1.1020/11/2025

Konten halaman ini diterjemahkan menggunakan AI.

Lihat versi terakhir dari konten aslinya dalam bahasa Inggris

Sunting dokumen ini

Jika Anda memiliki ide untuk meningkatkan dokumentasi ini, silakan berkontribusi dengan mengajukan pull request di GitHub.

Tautan GitHub ke dokumentasi

Salin

Salin Markdown dokumentasi ke clipboard

Terjemahkan situs web SvelteKit Anda menggunakan Intlayer | Internasionalisasi (i18n)

ide.intlayer.org

Daftar Isi

Apa itu Intlayer?

Intlayer adalah perpustakaan internasionalisasi (i18n) sumber terbuka yang inovatif, dirancang untuk menyederhanakan dukungan multibahasa dalam aplikasi web modern. Ini bekerja mulus dengan kemampuan Server-Side Rendering (SSR) dari SvelteKit.

Dengan Intlayer, Anda dapat:

Mengelola terjemahan dengan mudah menggunakan kamus deklaratif di tingkat komponen.
Melokalkan metadata, rute, dan konten secara dinamis.
Memastikan dukungan TypeScript dengan tipe yang dihasilkan secara otomatis.
Memanfaatkan SSR SvelteKit untuk internasionalisasi yang ramah SEO.

Panduan Langkah demi Langkah untuk Mengatur Intlayer dalam Aplikasi SvelteKit

Untuk memulai, buat proyek SvelteKit baru. Berikut adalah struktur akhir yang akan kita buat:

bash

Salin kode

Salin kode ke clipboard

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

Langkah 1: Instalasi Dependencies

Instal paket yang diperlukan menggunakan npm:

bash

Salin kode

Salin kode ke clipboard

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

intlayer: Paket inti i18n.
svelte-intlayer: Menyediakan context providers dan stores untuk Svelte/SvelteKit.
vite-intlayer: Plugin Vite untuk mengintegrasikan deklarasi konten dengan proses build.

Langkah 2: Konfigurasi proyek Anda

Buat file konfigurasi di root proyek Anda:

intlayer.config.ts

Salin kode

Salin kode ke clipboard

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

Langkah 3: Integrasikan Intlayer dalam Konfigurasi Vite Anda

Perbarui vite.config.ts Anda untuk menyertakan plugin Intlayer. Plugin ini menangani transpile file konten Anda.

vite.config.ts

Salin kode

Salin kode ke clipboard

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // urutan penting, Intlayer harus ditempatkan sebelum SvelteKit});

Langkah 4: Deklarasikan Konten Anda

Buat file deklarasi konten Anda di mana saja dalam folder src Anda (misalnya, src/lib/content atau di samping komponen Anda). File-file ini mendefinisikan konten yang dapat diterjemahkan untuk aplikasi Anda menggunakan fungsi t() untuk setiap locale.

Langkah 5: Gunakan Intlayer dalam Komponen Anda

Sekarang Anda dapat menggunakan fungsi useIntlayer di komponen Svelte mana pun. Fungsi ini mengembalikan store reaktif yang secara otomatis diperbarui saat locale berubah. Fungsi ini akan secara otomatis menghormati locale saat ini (baik selama SSR maupun navigasi sisi klien).

Catatan: useIntlayer mengembalikan store Svelte, jadi Anda perlu menggunakan prefix `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Cara menerjemahkan aplikasi SvelteKit Anda – panduan i18n 2026 description: Temukan cara membuat situs web SvelteKit Anda menjadi multibahasa. Ikuti dokumentasi untuk melakukan internasionalisasi (i18n) dan menerjemahkannya menggunakan Server-Side Rendering (SSR). keywords:

Internasionalisasi
Dokumentasi
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: Inisialisasi riwayat

Terjemahkan situs web SvelteKit Anda menggunakan Intlayer | Internasionalisasi (i18n)

Daftar Isi

Apa itu Intlayer?

Dengan Intlayer, Anda dapat:

Mengelola terjemahan dengan mudah menggunakan kamus deklaratif di tingkat komponen.
Melokalkan metadata, rute, dan konten secara dinamis.
Memastikan dukungan TypeScript dengan tipe yang dihasilkan secara otomatis.
Memanfaatkan SSR SvelteKit untuk internasionalisasi yang ramah SEO.

Panduan Langkah demi Langkah untuk Mengatur Intlayer dalam Aplikasi SvelteKit

Untuk memulai, buat proyek SvelteKit baru. Berikut adalah struktur akhir yang akan kita buat:

bash

Salin kode

Salin kode ke clipboard

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

Langkah 1: Instalasi Dependencies

Instal paket yang diperlukan menggunakan npm:

bash

Salin kode

Salin kode ke clipboard

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

intlayer: Paket inti i18n.
svelte-intlayer: Menyediakan context providers dan stores untuk Svelte/SvelteKit.
vite-intlayer: Plugin Vite untuk mengintegrasikan deklarasi konten dengan proses build.

Langkah 2: Konfigurasi proyek Anda

Buat file konfigurasi di root proyek Anda:

intlayer.config.ts

Salin kode

Salin kode ke clipboard

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

Langkah 3: Integrasikan Intlayer dalam Konfigurasi Vite Anda

Perbarui vite.config.ts Anda untuk menyertakan plugin Intlayer. Plugin ini menangani transpile file konten Anda.

vite.config.ts

Salin kode

Salin kode ke clipboard

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // urutan penting, Intlayer harus ditempatkan sebelum SvelteKit});

Langkah 4: Deklarasikan Konten Anda

Langkah 5: Gunakan Intlayer dalam Komponen Anda

untuk mengakses nilai reaktifnya (misalnya, $content.title).

src/lib/components/Component.svelte

Salin kode

Salin kode ke clipboard

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" sesuai dengan key yang didefinisikan di Langkah 4  const content = useIntlayer("hero-section");</script><!-- Render konten sebagai konten sederhana  --><h1>{$content.title}</h1><!-- Untuk merender konten yang dapat diedit menggunakan editor --><h1>{@const Title = $content.title}<Title /></h1><!-- Untuk merender konten sebagai string --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Opsional) Langkah 6: Atur routing

Langkah-langkah berikut menunjukkan cara mengatur routing berbasis locale di SvelteKit. Ini memungkinkan URL Anda menyertakan prefix locale (misalnya, /en/about, /fr/about) untuk SEO yang lebih baik dan pengalaman pengguna yang lebih baik.

bash

Salin kode

Salin kode ke clipboard

.└─── src    ├── app.d.ts                  # Mendefinisikan tipe locale    ├── hooks.server.ts           # Mengelola routing locale    ├── lib    │   └── getLocale.ts          # Memeriksa locale dari header, cookies    ├── params    │   └── locale.ts             # Mendefinisikan parameter locale    └── routes        ├── [[locale=locale]]     # Bungkus dalam grup route untuk mengatur locale        │   ├── +layout.svelte    # Tata letak lokal untuk rute        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Tata letak root untuk font dan gaya global

Langkah 7: Tangani Deteksi Locale di Server (Hooks)

Di SvelteKit, server perlu mengetahui locale pengguna untuk merender konten yang benar selama SSR. Kita menggunakan hooks.server.ts untuk mendeteksi locale dari URL atau cookie.

Buat atau modifikasi src/hooks.server.ts:

src/hooks.server.ts

Salin kode

Salin kode ke clipboard

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);  // Periksa apakah path saat ini sudah diawali dengan locale (misal /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Jika TIDAK ada locale dalam URL (misal pengguna mengunjungi "/"), arahkan ulang mereka  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Redirect sementara    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Kemudian, buat helper untuk mendapatkan locale pengguna dari event request:

src/lib/getLocale.ts

Salin kode

Salin kode ke clipboard

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Mendapatkan locale pengguna dari event request. * Fungsi ini digunakan dalam hook `handle` di `src/hooks.server.ts`. * * Pertama-tama mencoba mendapatkan locale dari penyimpanan Intlayer (cookies atau header khusus). * Jika locale tidak ditemukan, maka menggunakan fallback negosiasi "Accept-Language" dari browser. * * @param event - Event request dari SvelteKit * @returns Locale pengguna */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Mencoba mendapatkan locale dari penyimpanan Intlayer (Cookies atau header)  const storedLocale = getLocaleFromStorage({    // Akses cookie SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Akses header SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Cadangan ke negosiasi "Accept-Language" browser  const negotiatorHeaders: Record<string, string> = {};  // Mengonversi objek Headers SvelteKit menjadi Record<string, string> biasa  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Periksa locale dari header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Kembalikan locale default jika tidak ada yang cocok ditemukan  return defaultLocale;};

getLocaleFromStorage akan memeriksa locale dari header atau cookie tergantung pada konfigurasi Anda. Lihat Configuration untuk detail lebih lanjut.

Fungsi localeDetector akan memproses header Accept-Language dan mengembalikan kecocokan terbaik.

Jika locale tidak dikonfigurasi, kita ingin mengembalikan error 404. Untuk mempermudah, kita dapat membuat fungsi match untuk memeriksa apakah locale valid:

/src/params/locale.ts

Salin kode

Salin kode ke clipboard

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

Catatan: Pastikan src/app.d.ts Anda menyertakan definisi locale:
typescript
Salin kode
Salin kode ke clipboard
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Untuk file +layout.svelte, kita dapat menghapus semuanya, agar hanya menyimpan konten statis yang tidak terkait dengan i18n:

src/+layout.svelte

Salin kode

Salin kode ke clipboard

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

Kemudian, buat halaman dan layout baru di bawah grup [[locale=locale]]:

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

Salin kode

Salin kode ke clipboard

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Gunakan tipe Load generikexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

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

Salin kode

Salin kode ke clipboard

<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();    // Inisialisasi Intlayer dengan locale dari route  $effect(() => {      setupIntlayer(data.locale);  });    // Gunakan kamus konten 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

Salin kode

Salin kode ke clipboard

export const prerender = true;

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

Salin kode

Salin kode ke clipboard

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Gunakan kamus konten home    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Opsional) Langkah 8: Tautan Internasionalisasi

Untuk SEO, disarankan untuk menambahkan prefix locale pada rute Anda (misalnya, /en/about, /fr/about). Komponen ini secara otomatis menambahkan prefix locale saat ini pada setiap tautan.

src/lib/components/LocalizedLink.svelte

Salin kode

Salin kode ke clipboard

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Bantuan untuk menambahkan prefix URL dengan locale saat ini  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Jika Anda menggunakan goto dari SvelteKit, Anda dapat menggunakan logika yang sama dengan getLocalizedUrl untuk menavigasi ke URL yang sudah dilokalkan:

typescript

Salin kode

Salin kode ke clipboard

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Menavigasi ke /en/about atau /fr/about tergantung locale

(Opsional) Langkah 9: Pengalih Bahasa

Untuk memungkinkan pengguna mengganti bahasa, perbarui URL.

src/lib/components/LanguageSwitcher.svelte

Salin kode

Salin kode ke clipboard

<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); // Akan mengatur locale di store dan memicu onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Opsional) Langkah 10: Tambahkan proxy backend

Untuk menambahkan proxy backend ke aplikasi SvelteKit Anda, Anda dapat menggunakan fungsi intlayerProxy yang disediakan oleh plugin vite-intlayer. Plugin ini akan secara otomatis mendeteksi locale terbaik untuk pengguna berdasarkan URL, cookie, dan preferensi bahasa browser.

vite.config.ts

Salin kode

Salin kode ke clipboard

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

(Opsional) Langkah 11: Mengatur editor / CMS intlayer

Untuk mengatur editor intlayer, Anda harus mengikuti dokumentasi editor intlayer.

Untuk mengatur CMS intlayer, Anda harus mengikuti dokumentasi CMS intlayer.

Untuk dapat memvisualisasikan selector editor intlayer, Anda harus menggunakan sintaks komponen dalam konten intlayer Anda.

Component.svelte

Salin kode

Salin kode ke clipboard

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Render konten sebagai konten sederhana -->  <h1>{$content.title}</h1>  <!-- Render konten sebagai komponen (diperlukan oleh editor) -->  {@const Component = $content.component}<Component /></div>

Konfigurasi Git

Disarankan untuk mengabaikan file-file yang dihasilkan oleh Intlayer.

.gitignore

Salin kode

Salin kode ke clipboard

# Abaikan file-file yang dihasilkan oleh Intlayer.intlayer

(Opsional) Langkah 1 : Ekstrak konten komponen Anda

Jika Anda memiliki basis kode yang ada, mengubah ribuan file bisa memakan waktu lama.

Untuk memudahkan proses ini, Intlayer mengusulkan compiler / extractor untuk mengubah komponen Anda dan mengekstrak kontennya.

Untuk mengaturnya, Anda dapat menambahkan bagian compiler di file intlayer.config.ts Anda:

intlayer.config.ts

Salin kode

Salin kode ke clipboard

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Sisa konfigurasi Anda
  compiler: {
    /**
     * Menunjukkan apakah compiler harus diaktifkan.
     */
    enabled: true,

    /**
     * Menentukan jalur file output
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Menunjukkan apakah komponen harus disimpan setelah diubah. Dengan begitu, compiler dapat dijalankan satu kali saja untuk mengubah aplikasi, lalu dapat dihapus.
     */
    saveComponents: false,

    /**
     * Prefiks kunci kamus
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Jalankan extractor untuk mengubah komponen Anda dan mengekstrak kontennya

bash

Salin kode

Salin kode ke clipboard

npx intlayer extract

Perbarui vite.config.ts Anda untuk menyertakan plugin intlayerCompiler:

vite.config.ts

Salin kode

Salin kode ke clipboard

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Menambahkan plugin compiler ],});

bash

Salin kode

Salin kode ke clipboard

npm run build # Atau npm run dev

Melangkah Lebih Jauh

Editor Visual: Integrasikan Intlayer Visual Editor untuk mengedit terjemahan langsung dari UI.
CMS: Eksternalisasi manajemen konten Anda menggunakan Intlayer CMS.

Vite dan Svelte

Vite dan Preact

\n\n\n

{$content.title}

\n\n

\n\t

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

\n {\n e.preventDefault();\n setLocale(localeEl); // Akan mengatur locale di store dan memicu 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

Dibuat:2025-11-20Terakhir diperbarui:2026-05-06

Lihat template aplikasi di GitHub

Halaman ini memiliki template aplikasi yang tersedia.

Lihat aplikasi showcase

Halaman ini menautkan ke demo langsung template.

Referensikan dokumen ini ke asisten AI favorit Anda

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Ajukan pertanyaan Anda dan dapatkan ringkasan dokumen dengan merujuk halaman ini dan penyedia AI pilihan Anda

Riwayat Versi

"Perbarui penggunaan API useIntlayer Solid ke akses properti langsung"
v8.9.04/5/2026
"Tambahkan perintah init"
v7.5.930/12/2025
"Inisialisasi riwayat"
v7.1.1020/11/2025

Konten halaman ini diterjemahkan menggunakan AI.

Lihat versi terakhir dari konten aslinya dalam bahasa Inggris

Sunting dokumen ini

Jika Anda memiliki ide untuk meningkatkan dokumentasi ini, silakan berkontribusi dengan mengajukan pull request di GitHub.

Tautan GitHub ke dokumentasi

Salin

Salin Markdown dokumentasi ke clipboard

Terjemahkan situs web SvelteKit Anda menggunakan Intlayer | Internasionalisasi (i18n)

ide.intlayer.org

Daftar Isi

Apa itu Intlayer?

Dengan Intlayer, Anda dapat:

Mengelola terjemahan dengan mudah menggunakan kamus deklaratif di tingkat komponen.
Melokalkan metadata, rute, dan konten secara dinamis.
Memastikan dukungan TypeScript dengan tipe yang dihasilkan secara otomatis.
Memanfaatkan SSR SvelteKit untuk internasionalisasi yang ramah SEO.

Panduan Langkah demi Langkah untuk Mengatur Intlayer dalam Aplikasi SvelteKit

Untuk memulai, buat proyek SvelteKit baru. Berikut adalah struktur akhir yang akan kita buat:

bash

Salin kode

Salin kode ke clipboard

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

Langkah 1: Instalasi Dependencies

Instal paket yang diperlukan menggunakan npm:

bash

Salin kode

Salin kode ke clipboard

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: Paket inti i18n.
svelte-intlayer: Menyediakan context providers dan stores untuk Svelte/SvelteKit.
vite-intlayer: Plugin Vite untuk mengintegrasikan deklarasi konten dengan proses build.

Langkah 2: Konfigurasi proyek Anda

Buat file konfigurasi di root proyek Anda:

intlayer.config.ts

Salin kode

Salin kode ke clipboard

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;

Langkah 3: Integrasikan Intlayer dalam Konfigurasi Vite Anda

Perbarui vite.config.ts Anda untuk menyertakan plugin Intlayer. Plugin ini menangani transpile file konten Anda.

vite.config.ts

Salin kode

Salin kode ke clipboard

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // urutan penting, Intlayer harus ditempatkan sebelum SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // urutan penting, Intlayer harus ditempatkan sebelum SvelteKit});

Langkah 4: Deklarasikan Konten Anda

Langkah 5: Gunakan Intlayer dalam Komponen Anda

Catatan: useIntlayer mengembalikan store Svelte, jadi Anda perlu menggunakan prefix `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Cara menerjemahkan aplikasi SvelteKit Anda – panduan i18n 2026 description: Temukan cara membuat situs web SvelteKit Anda menjadi multibahasa. Ikuti dokumentasi untuk melakukan internasionalisasi (i18n) dan menerjemahkannya menggunakan Server-Side Rendering (SSR). keywords:

Internasionalisasi
Dokumentasi
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: Inisialisasi riwayat

Terjemahkan situs web SvelteKit Anda menggunakan Intlayer | Internasionalisasi (i18n)

Daftar Isi

Apa itu Intlayer?

Dengan Intlayer, Anda dapat:

Mengelola terjemahan dengan mudah menggunakan kamus deklaratif di tingkat komponen.
Melokalkan metadata, rute, dan konten secara dinamis.
Memastikan dukungan TypeScript dengan tipe yang dihasilkan secara otomatis.
Memanfaatkan SSR SvelteKit untuk internasionalisasi yang ramah SEO.

Panduan Langkah demi Langkah untuk Mengatur Intlayer dalam Aplikasi SvelteKit

Untuk memulai, buat proyek SvelteKit baru. Berikut adalah struktur akhir yang akan kita buat:

bash

Salin kode

Salin kode ke clipboard

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

Langkah 1: Instalasi Dependencies

Instal paket yang diperlukan menggunakan npm:

bash

Salin kode

Salin kode ke clipboard

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: Paket inti i18n.
svelte-intlayer: Menyediakan context providers dan stores untuk Svelte/SvelteKit.
vite-intlayer: Plugin Vite untuk mengintegrasikan deklarasi konten dengan proses build.

Langkah 2: Konfigurasi proyek Anda

Buat file konfigurasi di root proyek Anda:

intlayer.config.ts

Salin kode

Salin kode ke clipboard

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;

Langkah 3: Integrasikan Intlayer dalam Konfigurasi Vite Anda

Perbarui vite.config.ts Anda untuk menyertakan plugin Intlayer. Plugin ini menangani transpile file konten Anda.

vite.config.ts

Salin kode

Salin kode ke clipboard

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // urutan penting, Intlayer harus ditempatkan sebelum SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // urutan penting, Intlayer harus ditempatkan sebelum SvelteKit});

Langkah 4: Deklarasikan Konten Anda

Langkah 5: Gunakan Intlayer dalam Komponen Anda

untuk mengakses nilai reaktifnya (misalnya, $content.title).

src/lib/components/Component.svelte

Salin kode

Salin kode ke clipboard

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" sesuai dengan key yang didefinisikan di Langkah 4  const content = useIntlayer("hero-section");</script><!-- Render konten sebagai konten sederhana  --><h1>{$content.title}</h1><!-- Untuk merender konten yang dapat diedit menggunakan editor --><h1>{@const Title = $content.title}<Title /></h1><!-- Untuk merender konten sebagai string --><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" sesuai dengan key yang didefinisikan di Langkah 4  const content = useIntlayer("hero-section");</script><!-- Render konten sebagai konten sederhana  --><h1>{$content.title}</h1><!-- Untuk merender konten yang dapat diedit menggunakan editor --><h1>{@const Title = $content.title}<Title /></h1><!-- Untuk merender konten sebagai string --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Opsional) Langkah 6: Atur routing

bash

Salin kode

Salin kode ke clipboard

.└─── src    ├── app.d.ts                  # Mendefinisikan tipe locale    ├── hooks.server.ts           # Mengelola routing locale    ├── lib    │   └── getLocale.ts          # Memeriksa locale dari header, cookies    ├── params    │   └── locale.ts             # Mendefinisikan parameter locale    └── routes        ├── [[locale=locale]]     # Bungkus dalam grup route untuk mengatur locale        │   ├── +layout.svelte    # Tata letak lokal untuk rute        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Tata letak root untuk font dan gaya global

.└─── src    ├── app.d.ts                  # Mendefinisikan tipe locale    ├── hooks.server.ts           # Mengelola routing locale    ├── lib    │   └── getLocale.ts          # Memeriksa locale dari header, cookies    ├── params    │   └── locale.ts             # Mendefinisikan parameter locale    └── routes        ├── [[locale=locale]]     # Bungkus dalam grup route untuk mengatur locale        │   ├── +layout.svelte    # Tata letak lokal untuk rute        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Tata letak root untuk font dan gaya global

Langkah 7: Tangani Deteksi Locale di Server (Hooks)

Di SvelteKit, server perlu mengetahui locale pengguna untuk merender konten yang benar selama SSR. Kita menggunakan hooks.server.ts untuk mendeteksi locale dari URL atau cookie.

Buat atau modifikasi src/hooks.server.ts:

src/hooks.server.ts

Salin kode

Salin kode ke clipboard

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);  // Periksa apakah path saat ini sudah diawali dengan locale (misal /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Jika TIDAK ada locale dalam URL (misal pengguna mengunjungi "/"), arahkan ulang mereka  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Redirect sementara    });  }  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);  // Periksa apakah path saat ini sudah diawali dengan locale (misal /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Jika TIDAK ada locale dalam URL (misal pengguna mengunjungi "/"), arahkan ulang mereka  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Redirect sementara    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Kemudian, buat helper untuk mendapatkan locale pengguna dari event request:

src/lib/getLocale.ts

Salin kode

Salin kode ke clipboard

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Mendapatkan locale pengguna dari event request. * Fungsi ini digunakan dalam hook `handle` di `src/hooks.server.ts`. * * Pertama-tama mencoba mendapatkan locale dari penyimpanan Intlayer (cookies atau header khusus). * Jika locale tidak ditemukan, maka menggunakan fallback negosiasi "Accept-Language" dari browser. * * @param event - Event request dari SvelteKit * @returns Locale pengguna */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Mencoba mendapatkan locale dari penyimpanan Intlayer (Cookies atau header)  const storedLocale = getLocaleFromStorage({    // Akses cookie SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Akses header SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Cadangan ke negosiasi "Accept-Language" browser  const negotiatorHeaders: Record<string, string> = {};  // Mengonversi objek Headers SvelteKit menjadi Record<string, string> biasa  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Periksa locale dari header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Kembalikan locale default jika tidak ada yang cocok ditemukan  return defaultLocale;};

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Mendapatkan locale pengguna dari event request. * Fungsi ini digunakan dalam hook `handle` di `src/hooks.server.ts`. * * Pertama-tama mencoba mendapatkan locale dari penyimpanan Intlayer (cookies atau header khusus). * Jika locale tidak ditemukan, maka menggunakan fallback negosiasi "Accept-Language" dari browser. * * @param event - Event request dari SvelteKit * @returns Locale pengguna */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Mencoba mendapatkan locale dari penyimpanan Intlayer (Cookies atau header)  const storedLocale = getLocaleFromStorage({    // Akses cookie SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Akses header SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Cadangan ke negosiasi "Accept-Language" browser  const negotiatorHeaders: Record<string, string> = {};  // Mengonversi objek Headers SvelteKit menjadi Record<string, string> biasa  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Periksa locale dari header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Kembalikan locale default jika tidak ada yang cocok ditemukan  return defaultLocale;};

getLocaleFromStorage akan memeriksa locale dari header atau cookie tergantung pada konfigurasi Anda. Lihat Configuration untuk detail lebih lanjut.

Fungsi localeDetector akan memproses header Accept-Language dan mengembalikan kecocokan terbaik.

Jika locale tidak dikonfigurasi, kita ingin mengembalikan error 404. Untuk mempermudah, kita dapat membuat fungsi match untuk memeriksa apakah locale valid:

/src/params/locale.ts

Salin kode

Salin kode ke clipboard

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

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

Catatan: Pastikan src/app.d.ts Anda menyertakan definisi locale:

typescript

Salin kode

Salin kode ke clipboard

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

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

Untuk file +layout.svelte, kita dapat menghapus semuanya, agar hanya menyimpan konten statis yang tidak terkait dengan i18n:

src/+layout.svelte

Salin kode

Salin kode ke clipboard

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

Kemudian, buat halaman dan layout baru di bawah grup [[locale=locale]]:

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

Salin kode

Salin kode ke clipboard

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Gunakan tipe Load generikexport 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;// Gunakan tipe Load generikexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

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

Salin kode

Salin kode ke clipboard

<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();    // Inisialisasi Intlayer dengan locale dari route  $effect(() => {      setupIntlayer(data.locale);  });    // Gunakan kamus konten 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();    // Inisialisasi Intlayer dengan locale dari route  $effect(() => {      setupIntlayer(data.locale);  });    // Gunakan kamus konten 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

Salin kode

Salin kode ke clipboard

export const prerender = true;

export const prerender = true;

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

Salin kode

Salin kode ke clipboard

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Gunakan kamus konten home    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";    // Gunakan kamus konten home    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Opsional) Langkah 8: Tautan Internasionalisasi

Untuk SEO, disarankan untuk menambahkan prefix locale pada rute Anda (misalnya, /en/about, /fr/about). Komponen ini secara otomatis menambahkan prefix locale saat ini pada setiap tautan.

src/lib/components/LocalizedLink.svelte

Salin kode

Salin kode ke clipboard

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Bantuan untuk menambahkan prefix URL dengan locale saat ini  $: 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();  // Bantuan untuk menambahkan prefix URL dengan locale saat ini  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Jika Anda menggunakan goto dari SvelteKit, Anda dapat menggunakan logika yang sama dengan getLocalizedUrl untuk menavigasi ke URL yang sudah dilokalkan:

typescript

Salin kode

Salin kode ke clipboard

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Menavigasi ke /en/about atau /fr/about tergantung 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); // Menavigasi ke /en/about atau /fr/about tergantung locale

(Opsional) Langkah 9: Pengalih Bahasa

Untuk memungkinkan pengguna mengganti bahasa, perbarui URL.

src/lib/components/LanguageSwitcher.svelte

Salin kode

Salin kode ke clipboard

<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); // Akan mengatur locale di store dan memicu 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); // Akan mengatur locale di store dan memicu onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Opsional) Langkah 10: Tambahkan proxy backend

vite.config.ts

Salin kode

Salin kode ke clipboard

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

(Opsional) Langkah 11: Mengatur editor / CMS intlayer

Untuk mengatur editor intlayer, Anda harus mengikuti dokumentasi editor intlayer.

Untuk mengatur CMS intlayer, Anda harus mengikuti dokumentasi CMS intlayer.

Untuk dapat memvisualisasikan selector editor intlayer, Anda harus menggunakan sintaks komponen dalam konten intlayer Anda.

Component.svelte

Salin kode

Salin kode ke clipboard

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Render konten sebagai konten sederhana -->  <h1>{$content.title}</h1>  <!-- Render konten sebagai komponen (diperlukan oleh editor) -->  {@const Component = $content.component}<Component /></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Render konten sebagai konten sederhana -->  <h1>{$content.title}</h1>  <!-- Render konten sebagai komponen (diperlukan oleh editor) -->  {@const Component = $content.component}<Component /></div>

Konfigurasi Git

Disarankan untuk mengabaikan file-file yang dihasilkan oleh Intlayer.

.gitignore

Salin kode

Salin kode ke clipboard

# Abaikan file-file yang dihasilkan oleh Intlayer.intlayer

# Abaikan file-file yang dihasilkan oleh Intlayer.intlayer

(Opsional) Langkah 1 : Ekstrak konten komponen Anda

Jika Anda memiliki basis kode yang ada, mengubah ribuan file bisa memakan waktu lama.

Untuk memudahkan proses ini, Intlayer mengusulkan compiler / extractor untuk mengubah komponen Anda dan mengekstrak kontennya.

Untuk mengaturnya, Anda dapat menambahkan bagian compiler di file intlayer.config.ts Anda:

intlayer.config.ts

Salin kode

Salin kode ke clipboard

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Sisa konfigurasi Anda
  compiler: {
    /**
     * Menunjukkan apakah compiler harus diaktifkan.
     */
    enabled: true,

    /**
     * Menentukan jalur file output
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Menunjukkan apakah komponen harus disimpan setelah diubah. Dengan begitu, compiler dapat dijalankan satu kali saja untuk mengubah aplikasi, lalu dapat dihapus.
     */
    saveComponents: false,

    /**
     * Prefiks kunci kamus
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Jalankan extractor untuk mengubah komponen Anda dan mengekstrak kontennya

bash

Salin kode

Salin kode ke clipboard

npx intlayer extract

npx intlayer extract

Perbarui vite.config.ts Anda untuk menyertakan plugin intlayerCompiler:

vite.config.ts

Salin kode

Salin kode ke clipboard

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Menambahkan plugin compiler ],});

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Menambahkan plugin compiler ],});

bash

Salin kode

Salin kode ke clipboard

npm run build # Atau npm run dev

npm run build # Atau npm run dev

Melangkah Lebih Jauh

Editor Visual: Integrasikan Intlayer Visual Editor untuk mengedit terjemahan langsung dari UI.
CMS: Eksternalisasi manajemen konten Anda menggunakan Intlayer CMS.

Vite dan Svelte

Vite dan Preact