Intermediatei18n25 menit18 Apr 2026

i18n untuk Situs Statis — 5 Locale

Lokalisasi slash-route tanpa CMS: dictionary, path dinamis [locale], hreflang, dan menjaga lima bahasa tetap sinkron.

Arsitekturnya

/en/blog/hello    ← locale default, tetap berprefix (lebih bersih daripada kasus khusus)
/ru/blog/hello
/zh/blog/hello
/ja/blog/hello
/de/blog/hello

Tiga bagian yang bergerak:

  1. Dictionary — satu JSON per locale, bentuk identik, diketik Record<Locale, typeof en> sehingga TypeScript berteriak saat ada key yang bergeser.
  2. Route dinamis — src/pages/[locale]/... dengan getStaticPaths() yang mengembalikan semua locale.
  3. Content fallback — tulis post sekali di en/, render di bawah semua locale sampai terjemahannya ada.

Trik type yang menyelamatkanmu

export type Locale = "en" | "ru" | "zh" | "ja" | "de";
const dictionaries: Record<Locale, typeof en> = { en, ru, zh, ja, de };

typeof en adalah schema-nya. Tambahkan key ke en.json dan build akan gagal sampai keempat dictionary lain menyusul.

Jangan lupakan head

<link rel="alternate" hreflang="..."> untuk tiap locale plus x-default, canonical per halaman, dan path yang diturunkan dari Astro.url. Search engine menghargai plumbing yang membosankan.

Tutorial