Integrasi Next.js: Dokumentasi Hook useIntlayer

Hook useIntlayer dirancang khusus untuk aplikasi Next.js guna mengambil dan mengelola konten yang dilokalisasi secara efisien. Dokumentasi ini akan fokus pada cara menggunakan hook ini dalam proyek Next.js, memastikan praktik lokalisasi yang tepat.

Mengimpor useIntlayer di Next.js

Tergantung pada apakah Anda bekerja pada komponen sisi klien atau sisi server dalam aplikasi Next.js, Anda dapat mengimpor hook useIntlayer sebagai berikut:

• Komponen Klien:

  typescript

  Salin konten

  Salin kode

  Salin kode ke clipboard

  import { useIntlayer } from "next-intlayer"; // Digunakan dalam komponen sisi klien

• Komponen Server:

  tsx

  Salin konten

  Salin kode

  Salin kode ke clipboard

  import { useIntlayer } from "next-intlayer/server"; // Digunakan dalam komponen sisi server

Parameter

1. key: Identifier string untuk kunci kamus dari mana Anda ingin mengambil konten.
2. locale (opsional): Locale spesifik yang akan digunakan. Jika tidak disertakan, hook akan menggunakan locale yang disetel dalam konteks klien atau server.

File Kamus

Sangat penting bahwa semua kunci konten didefinisikan dalam file deklarasi konten untuk mencegah kesalahan saat runtime dan memastikan keamanan tipe. Pendekatan ini juga memudahkan integrasi TypeScript untuk validasi saat kompilasi.

Instruksi untuk mengatur file deklarasi konten tersedia di sini.

Contoh Penggunaan di Next.js

Berikut cara mengimplementasikan hook useIntlayer dalam halaman Next.js untuk memuat konten yang dilokalkan secara dinamis berdasarkan locale aplikasi saat ini:

import { ClientComponentExample } from "@components/ClientComponentExample";
import { ServerComponentExample } from "@components/ServerComponentExample";
import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
import { useIntlayer, IntlayerServerProvider } from "next-intlayer/server";

const HomePage: NextPageIntlayer = async ({ params }) => {
  const { locale } = await params;

  const content = useIntlayer("homepage", locale);

  return (
    <>
      <p>{content.introduction}</p>
      <IntlayerClientProvider locale={locale}>
        <ClientComponentExample />
      </IntlayerClientProvider>
      <IntlayerServerProvider locale={locale}>
        <ServerComponentExample />
      </IntlayerServerProvider>
    </>
  );
};

"use-client";

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

const ClientComponentExample: FC = () => {
  const content = useIntlayer("component-content");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};

tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
import type { FC } from "react";
import { useIntlayer } from "next-intlayer/server";

const ServerComponentExample: FC = () => {
  const content = useIntlayer("component-content");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};

Penanganan Lokalisasi Atribut

Untuk melokalisasi atribut seperti alt, title, href, aria-label, dll., pastikan Anda merujuk konten dengan benar:

<img src={content.image.src.value} alt={content.image.alt.value} /><img src={content.image.src.toString()} alt={content.image.alt.toString()} /><img src={String(content.image.src)} alt={String(content.image.alt)} />

Informasi Lebih Lanjut

• Intlayer Visual Editor: Pelajari cara menggunakan editor visual untuk manajemen konten yang lebih mudah di sini.

Dokumentasi ini menguraikan penggunaan hook useIntlayer secara khusus dalam lingkungan Next.js, menyediakan solusi yang kuat untuk mengelola lokalisasi di seluruh aplikasi Next.js Anda.