Memperkenalkan Paraglide-js: Membangun Situs Bilingual dengan Mudah_

Pendahuluan

Menyediakan dukungan multi-bahasa (Internasionalisasi atau i18n) adalah langkah krusial untuk memperluas jangkauan situs web Anda dan memberikan pengalaman pengguna premium bagi audiens lokal. Namun, menyetel i18n dalam kerangka kerja (framework) modern sering kali merupakan proses yang rumit.

Banyak pustaka i18n populer bergantung pada pemuatan kamus terjemahan saat aplikasi berjalan (runtime dictionary loading). Hal ini kerap memicu masalah performa, seperti teks berkedip saat memuat halaman (di mana teks berubah dari bahasa Inggris ke bahasa tujuan setelah pemuatan selesai) serta membengkaknya bundle JavaScript akibat menampung kamus JSON berukuran besar.

Paraglide-JS (dikembangkan oleh tim Inlang) merombak total paradigma tersebut dengan menangani internasionalisasi pada saat kompilasi (compile-time). Paraglide menghasilkan fungsi pembantu terjemahan yang ringkas dan aman tipe (typesafe), memastikan tidak ada penambahan beban kerja saat aplikasi berjalan (zero runtime overhead), serta mendukung server-side rendering SvelteKit dengan sempurna.

1. Arsitektur Kompilasi i18n

Berbeda dengan pustaka tradisional yang memuat seluruh berkas terjemahan JSON melalui jaringan internet, Paraglide menyusun pesan terjemahan Anda langsung ke dalam fungsi-fungsi JavaScript berukuran sangat kecil yang bersifat tree-shakeable.

Jika komponen Svelte membutuhkan teks terjemahan, Anda tidak perlu memanggil fungsi generik seperti `$t('home.welcome')`. Sebaliknya, panggil fungsi terjemahan yang dihasilkan secara eksplisit oleh kompiler:

import * as m from '$lib/paraglide/messages';

// Panggilan terjemahan yang sepenuhnya aman tipe (typesafe)
console.log(m.welcome_message({ name: 'Mikeu' }));

Hal ini menjamin:

1. Keamanan Tipe Mutlak: Jika kunci terjemahan hilang atau argumen fungsi salah, proses build akan langsung memunculkan galat.
2. Pemisahan Kode Maksimal: Hanya pesan terjemahan yang digunakan oleh halaman aktif saja yang akan dimasukkan ke dalam berkas build klien.
3. Bebas Pergeseran Tampilan: Karena terjemahan disusun langsung pada kode tampilan, server SvelteKit menyajikan file HTML dalam bahasa yang benar secara instan sejak awal.

2. Struktur Berkas Kamus Terjemahan

Dalam konfigurasi Paraglide, terjemahan disusun di dalam direktori JSON terlokalisasi (biasanya di bawah folder `messages/`).

Berikut contoh strukturnya:

// messages/en.json
{
	"$schema": "https://inlang.com/schema/inlang-message-format",
	"home_hero_title": "Crafting Brutalist Digital Systems.",
	"home_hero_sub": "Hi, I am {name}, a software engineer focused on extreme performance."
}

// messages/id.json
{
	"$schema": "https://inlang.com/schema/inlang-message-format",
	"home_hero_title": "Membangun Sistem Digital Brutalist.",
	"home_hero_sub": "Halo, saya {name}, seorang software engineer dengan fokus performa ekstrem."
}

3. Menggunakan Terjemahan di Komponen Svelte 5

Menggunakan hasil kompilasi terjemahan Paraglide di dalam komponen Svelte 5 sangatlah mudah. Cukup impor dan jalankan fungsi terjemahan tersebut secara langsung:

<script lang="ts">
	import * as m from '$lib/paraglide/messages';
	let userName = $state('Riki');
</script>

<section class="hero-brutalist">
	<h1>{m.home_hero_title()}</h1>
	<p>{m.home_hero_sub({ name: userName })}</p>
</section>

<style>
	.hero-brutalist {
		border: 4px solid var(--foreground);
		padding: 40px;
		background: var(--background);
	}
</style>

4. Membangun Pengubah Bahasa di SvelteKit

Untuk memungkinkan pengguna beralih bahasa secara instan, Anda harus membuat tombol pemilih bahasa yang mengarahkan pengguna ke rute URL yang sesuai. Paraglide menyediakan utilitas `localizeHref` untuk menerjemahkan URL secara otomatis.

Berikut adalah contoh pemilih bahasa pada bilah navigasi menggunakan Svelte 5:

<script lang="ts">
	import { page } from '$app/state';
	import { locales, localizeHref, baseLocale } from '$lib/paraglide/runtime';
	import { goto } from '$app/navigation';

	// Ambil bahasa aktif dari jalur URL
	let activeLocale = $derived(page.url.pathname.startsWith('/id') ? 'id' : 'en');

	function switchLanguage(locale: string) {
		const targetUrl = localizeHref(page.url.pathname, { locale });
		goto(targetUrl);
	}
</script>

<div class="lang-switcher">
	{#each locales as locale}
		<button
			onclick={() => switchLanguage(locale)}
			class="lang-btn {activeLocale === locale ? 'active' : ''}"
		>
			{locale === 'en' ? '🇬🇧 EN' : '🇮🇩 ID'}
		</button>
	{/each}
</div>

<style>
	.lang-switcher {
		display: flex;
		gap: 8px;
		border: 2px solid var(--foreground);
		padding: 4px;
		background: var(--background);
	}
	.lang-btn {
		font-family: monospace;
		font-weight: bold;
		padding: 4px 8px;
		border: none;
		background: transparent;
		cursor: pointer;
		text-transform: uppercase;
	}
	.lang-btn.active {
		background: var(--foreground);
		color: var(--background);
	}
</style>

Kesimpulan

Paraglide-js menghadirkan standar kualitas tingkat tinggi bagi internasionalisasi aplikasi web. Dengan menggabungkan pemrosesan i18n pada tahap kompilasi bersama integrasi rute bawaan SvelteKit, Anda dapat meluncurkan produk aplikasi web bilingual yang sangat ringan dan berkinerja tinggi.