Intermediatei18n25 phút18 thg 4, 2026

i18n cho static site — 5 locale

Bản địa hóa bằng slash-route không cần CMS: dictionary, đường dẫn động [locale], hreflang, và giữ năm ngôn ngữ đồng bộ.

Kiến trúc

/en/blog/hello    ← locale mặc định, vẫn có prefix (sạch hơn là trường hợp đặc biệt)
/ru/blog/hello
/zh/blog/hello
/ja/blog/hello
/de/blog/hello

Ba bộ phận chuyển động:

  1. Dictionary — một JSON cho mỗi locale, cùng hình dạng, typed Record<Locale, typeof en> để TypeScript la lên khi một key bị lệch.
  2. Route động — src/pages/[locale]/... với getStaticPaths() trả về mọi locale.
  3. Content fallback — viết bài một lần trong en/, render dưới mọi locale cho đến khi có bản dịch.

Chiêu type cứu bạn

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

typeof en chính là schema. Thêm một key vào en.json và build sẽ fail cho đến khi bốn dictionary còn lại bắt kịp.

Đừng quên phần head

<link rel="alternate" hreflang="..."> cho mọi locale cộng thêm x-default, canonical cho từng trang, và các path lấy từ Astro.url. Search engine thưởng cho phần ống nước nhàm chán.