Cara mengambil locale dari cookies / headers

    Menggunakan Hooks (Direkomendasikan)

    Untuk sebagian besar kasus penggunaan, disarankan untuk mengambil locale saat ini menggunakan hook useLocale karena ini otomatis ter-resolve. Ini bekerja serupa dengan composable useLocale di Vue.js.

    ts
    import { useLocale } from "next-intlayer";// or import { useLocale } from "react-intlayer";// or import { useLocale } from "vue-intlayer";// Penggunaan di sisi klienconst { locale } = useLocale();

    Untuk komponen server, Anda dapat mengimpornya dari:

    tsx
    import { useLocale } from "next-intlayer/server";const Test = () => {  const { locale } = useLocale();  return <>{locale}</>;};const Page = async ({ params }) => {  const { locale } = await params;  return (    <IntlayerServerProvider locale={locale}>      <Test />    </IntlayerServerProvider>  );};

    Ada juga hook useLocaleCookie yang hanya mengambil nilai cookie.

    Konfigurasi Cookie Manual

    Anda dapat mendeklarasikan nama cookie kustom sebagai

    ts
    import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  middleware: {    cookieName: "myCustomLocaleCookie", // default adalah 'intlayer-locale'  },};export default config;

    kemudian mengambilnya sebagai

    Sisi Klien

    ts
    // Menggunakan nama cookie defaultconst locale = document.cookie  .split("; ")  .find((row) => row.startsWith("intlayer-locale="))  ?.split("=")[1];// Menggunakan nama cookie kustomconst locale = document.cookie  .split("; ")  .find((row) => row.startsWith("myCustomLocaleCookie="))  ?.split("=")[1];

    Sisi Server (Next.js)

    ts
    import { cookies } from "next/headers";// Menggunakan nama cookie defaultconst locale = cookies().get("intlayer-locale")?.value;// Menggunakan nama cookie kustomconst locale = cookies().get("myCustomLocaleCookie")?.value;

    Jika locale belum disetel

    Locale disetel sebagai cookie hanya setelah pengguna secara eksplisit memilih locale. Secara default, untuk pengunjung baru, locale diinterpretasikan dari field headers.

    Anda dapat mendeteksi locale yang disukai pengguna dari headers permintaan. Berikut adalah contoh cara menanganinya:

    ts
    /** * Mendeteksi locale dari headers permintaan * * Header accept-language adalah yang paling penting untuk deteksi locale. * Header ini berisi daftar kode bahasa dengan nilai kualitas (q-values) yang menunjukkan * bahasa yang disukai pengguna berdasarkan urutan preferensi. * * Contoh: "en-US,en;q=0.9,fr;q=0.8,es;q=0.7" * - en-US adalah bahasa utama (q=1.0 diasumsikan) * - en adalah pilihan kedua (q=0.9) * - fr adalah pilihan ketiga (q=0.8) * - es adalah pilihan keempat (q=0.7) */import { localeDetector } from "@intlayer/core";/** * Contoh header negosiator yang biasanya dikirim oleh browser * Header ini membantu menentukan bahasa yang disukai pengguna */const exampleNegotiatorHeaders: Record<string, string> = {  "accept-language": "en-US,en;q=0.9,fr;q=0.8,es;q=0.7",  "accept":    "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",  "user-agent":    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",};// Contoh penggunaan:const detectedLocale = localeDetector(exampleNegotiatorHeaders);