Integrasi Next.js: Dokumentasi Hook useLocale untuk next-intlayer

Bagian ini menawarkan dokumentasi terperinci tentang hook useLocale yang disesuaikan untuk aplikasi Next.js dalam pustaka next-intlayer. Hook ini dirancang untuk menangani perubahan locale dan routing secara efisien.

Mengimpor useLocale di Next.js

Untuk menggunakan hook useLocale dalam aplikasi Next.js Anda, impor seperti yang ditunjukkan di bawah ini:

import { useLocale } from "next-intlayer"; // Digunakan untuk mengelola locale dan routing di Next.js

Penggunaan

Berikut cara mengimplementasikan hook useLocale dalam komponen Next.js:

"use client";

import type { FC } from "react";
import { Locales } from "intlayer";
import { useLocale } from "next-intlayer";

const LocaleSwitcher: FC = () => {
  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();

  return (
    <div>
      <h1>Locale Saat Ini: {locale}</h1>
      <p>Locale Default: {defaultLocale}</p>
      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
        {availableLocales.map((loc) => (
          <option key={loc} value={loc}>
            {loc}
          </option>
        ))}
      </select>
    </div>
  );
};

Parameter

Hook useLocale menerima parameter berikut:

• onLocaleChange: Sebuah string yang menentukan bagaimana URL harus diperbarui saat locale berubah. Nilainya bisa "replace", "push", atau "none".

  Mari kita ambil contoh:

  1. Anda berada di /fr/home
  2. Anda menavigasi ke /fr/about
  3. Anda beralih ke /es/about
  4. Anda mengklik tombol "kembali" pada browser

  Perilaku akan berbeda berdasarkan nilai onLocaleChange:

  • "replace" (default): Mengganti URL saat ini dengan URL lokal baru, dan mengatur cookie. -> Tombol "kembali" akan menuju ke /es/home
  • "push": Menambahkan URL lokal baru ke riwayat browser, dan mengatur cookie. -> Tombol "kembali" akan menuju ke /fr/about
  • "none": Hanya memperbarui locale dalam konteks klien, dan mengatur cookie, tanpa mengubah URL. -> Tombol "kembali" akan menuju ke /fr/home

  • (locale) => void: Mengatur cookie dan memicu fungsi kustom yang akan dipanggil saat locale berubah.

    Opsi undefined adalah perilaku default karena kami merekomendasikan menggunakan komponen Link untuk menavigasi ke locale baru. Contoh:

    tsx

    Salin konten

    Salin kode

    Salin kode ke clipboard

    <Link href="/es/about" replace>  About</Link>

Nilai Kembalian

Saat Anda memanggil hook useLocale, hook ini mengembalikan sebuah objek yang berisi properti-properti berikut:

• locale: Locale saat ini yang diatur dalam konteks React.
• defaultLocale: Locale utama yang didefinisikan dalam konfigurasi.
• availableLocales: Daftar semua locale yang tersedia sesuai dengan definisi dalam konfigurasi.
• setLocale: Fungsi untuk mengubah locale aplikasi dan memperbarui URL sesuai. Fungsi ini mengatur aturan prefix, apakah locale ditambahkan ke path atau tidak berdasarkan konfigurasi. Menggunakan useRouter dari next/navigation untuk fungsi navigasi seperti push dan refresh.
• pathWithoutLocale: Properti terhitung yang mengembalikan path tanpa locale. Ini berguna untuk membandingkan URL. Misalnya, jika locale saat ini adalah fr, dan URL-nya fr/my_path, maka path tanpa locale adalah /my_path. Menggunakan usePathname dari next/navigation untuk mendapatkan path saat ini.

Kesimpulan

Hook useLocale dari next-intlayer adalah alat penting untuk mengelola locale dalam aplikasi Next.js. Hook ini menawarkan pendekatan terintegrasi untuk menyesuaikan aplikasi Anda dengan berbagai locale dengan menangani penyimpanan locale, manajemen state, dan modifikasi URL secara mulus.