Astro i18n: รองรับหลายภาษาใน Astro

i18n ใน Astro

Astro 4.0+ มี built-in i18n routing ที่ช่วยจัดการหลายภาษาได้ง่าย

ตั้งค่า i18n

// astro.config.mjs
export default defineConfig({
  i18n: {
    defaultLocale: 'th',
    locales: ['th', 'en', 'ja'],
    routing: {
      prefixDefaultLocale: false // /about แทน /th/about
    }
  }
});

โครงสร้างไฟล์

src/
  pages/
    index.astro        → /
    about.astro        → /about
    en/
      index.astro    → /en
      about.astro    → /en/about
    ja/
      index.astro    → /ja
      about.astro    → /ja/about

Translation Files

// src/i18n/th.ts
export const th = {
  nav: {
    home: 'หน้าหลัก',
    about: 'เกี่ยวกับ',
    blog: 'บทความ'
  },
  hero: {
    title: 'ยินดีต้อนรับ',
    subtitle: 'เว็บไซต์ของฉัน'
  }
};

// src/i18n/en.ts
export const en = {
  nav: {
    home: 'Home',
    about: 'About',
    blog: 'Blog'
  },
  hero: {
    title: 'Welcome',
    subtitle: 'My Website'
  }
};

i18n Utility

// src/i18n/utils.ts
import { th } from './th';
import { en } from './en';

const translations = { th, en };

export function useTranslations(locale: string) {
  return function t(key: string) {
    const keys = key.split('.');
    let value: any = translations[locale as keyof typeof translations];
    for (const k of keys) {
      value = value?.[k];
    }
    return value ?? key;
  };
}

ใช้ใน Page

---
import { useTranslations, getLangFromUrl } from '../i18n/utils';

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---

<nav>
  <a href="/">{t('nav.home')}</a>
  <a href="/about">{t('nav.about')}</a>
</nav>

<h1>{t('hero.title')}</h1>

Language Switcher

---
const currentPath = Astro.url.pathname;
---

<div>
  <a href={currentPath.replace('/en', '')}>ไทย</a>
  <a href={`/en${currentPath}`}>English</a>
  <a href={`/ja${currentPath}`}>日本語</a>
</div>

สรุป

Astro i18n routing ทำให้จัดการหลายภาษาได้ง่ายมาก ไม่ต้องพึ่ง library ภายนอก เหมาะกับ content sites ที่ต้องการ SEO ดีในหลายภาษาครับ