Penulis:
    Aymeric PINEAU
    Dibuat:2026-09-19Terakhir diperbarui:2026-09-19

    Dokumentasi Hook useLocale

    Hook useLocale dari astro-intlayer menyediakan akses ke lokal permintaan saat ini, lokal default yang dikonfigurasi, dan semua lokal yang tersedia dalam aplikasi Astro.

    Hook ini berperilaku konsisten di seluruh frontmatter .astro yang dirender server dan blok <script> sisi klien.

    Penggunaan

    Di Frontmatter Komponen (Dirender di Server)

    src/layouts/Layout.astro
    ---
import { useLocale } from "astro-intlayer";
import { getLocalizedUrl, getPathWithoutLocale } from "intlayer";

const { locale, defaultLocale, availableLocales } = useLocale();
const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
---

<!DOCTYPE html>
<html lang={locale}>
  <head>
    <meta charset="utf-8" />
    <title>Astro + Intlayer</title>
  </head>
  <body>
    <header>
      <span>Saat ini: {locale}</span>
      <span>Default: {defaultLocale}</span>
      <nav>
        <ul>
          {availableLocales.map((localeItem) => (
            <li key={localeItem} className="p-1">
              <a
                href={getLocalizedUrl(pathWithoutLocale, localeItem)}
                aria-current={localeItem === locale ? "page" : undefined}
              >
                {localeItem.toUpperCase()}
              </a>
            </li>
          ))}
        </ul>
      </nav>
    </header>
    <slot />
  </body>
</html>

    Di <script> Klien (Interaktif)

    src/components/LocaleSwitcher.astro
    ---
import { useLocale } from "astro-intlayer";

const { locale, availableLocales } = useLocale();
---

<select id="locale-select">
  {availableLocales.map((loc) => (
    <option value={loc} selected={loc === locale}>
      {loc.toUpperCase()}
    </option>
  ))}
</select>

<script>
  import { useLocale, setLocaleInStorage } from "astro-intlayer";

  const { setLocale } = useLocale();

  document.getElementById("locale-select")?.addEventListener("change", (e) => {
    const target = e.target as HTMLSelectElement;
    setLocale(target.value);
  });
</script>

    Nilai yang Dikembalikan

    Hook ini mengembalikan objek bertipe UseLocaleResult:

    PropertiTipeDeskripsi
    localeDeclaredLocalesLokal yang sedang aktif.
    defaultLocaleDeclaredLocalesLokal fallback default yang dikonfigurasi dalam intlayer.config.ts.
    availableLocalesDeclaredLocales[]Array semua lokal yang didukung dan dikonfigurasi untuk proyek.
    setLocale(locale: LocalesValues) => voidFungsi untuk memperbarui lokal. (Interaktif di <script> klien, memunculkan peringatan saat SSR).
    subscribe(callback: () => void) => () => voidBerlangganan perubahan lokal di sisi klien.

    Perilaku Server vs Klien

    • Selama SSR / Render Server: Permintaan dirender sekali dengan parameter tetap. Memanggil setLocale() selama render server tidak berpengaruh dan mengeluarkan peringatan; peralihan lokal harus dilakukan di klien atau dengan menavigasi ke URL lokal tujuan.
    • Dalam Skrip Klien: setLocale memperbarui store klien dan memperbarui cookie atau local storage yang disimpan sesuai konfigurasi Intlayer Anda.

    Dokumentasi Terkait

    useIntlayerremix-intlayer