Dibuat:2025-08-23Terakhir diperbarui:2025-08-23

Referensikan dokumen ini ke asisten AI favorit AndaChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Ajukan pertanyaan Anda dan dapatkan ringkasan dokumen dengan merujuk halaman ini dan penyedia AI pilihan Anda

Tambahkan MCP Server ke AI Assistant Anda

Dengan mengintegrasikan Intlayer MCP Server ke AI assistant favorit Anda, Anda dapat mengambil seluruh dokumentasi langsung dari ChatGPT, DeepSeek, Cursor, VSCode, dll.

Lihat dokumentasi MCP Server

Riwayat Versi

Penulisan awal dokumentasi hook `useI18n`
v6.0.029/6/2025

Konten halaman ini diterjemahkan menggunakan AI.

Lihat versi terakhir dari konten aslinya dalam bahasa Inggris

Sunting dokumen ini

Jika Anda memiliki ide untuk meningkatkan dokumentasi ini, silakan berkontribusi dengan mengajukan pull request di GitHub.

Tautan GitHub ke dokumentasi

Salin

Salin Markdown dokumentasi ke clipboard

Integrasi React: Dokumentasi Hook useI18n

Bagian ini memberikan panduan rinci tentang cara menggunakan hook useI18n dalam aplikasi React, memungkinkan lokalisasi konten yang efisien.

Mengimpor useI18n di React

Hook useI18n dapat diimpor dan diintegrasikan ke dalam aplikasi React sesuai dengan konteks sebagai berikut:

Komponen Klien:

import { useI18n } from "react-intlayer"; // Digunakan dalam komponen React sisi klien

Komponen Server:

Parameter

Hook ini menerima dua parameter:

namespace: Namespace kamus untuk membatasi ruang lingkup kunci terjemahan.
locale (opsional): Locale yang diinginkan. Jika tidak ditentukan, locale dari konteks akan digunakan sebagai default.

Kamus

Semua kunci kamus harus dideklarasikan dalam file deklarasi konten untuk meningkatkan keamanan tipe dan mencegah kesalahan. Instruksi konfigurasi dapat ditemukan di sini.

Contoh Penggunaan dalam React

Contoh penggunaan hook useI18n dalam komponen React:

src/App.tsx

Salin kode

Salin kode ke clipboard

import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useI18n, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => {  const t = useI18n("home-page", locale);  return (    <>      <p>{t("introduction")}</p>      <IntlayerProvider locale={locale}>        <ClientComponentExample />      </IntlayerProvider>      <IntlayerServerProvider locale={locale}>        <ServerComponentExample />      </IntlayerServerProvider>    </>  );};

import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useI18n, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => {  const t = useI18n("home-page", locale);  return (    <>      <p>{t("introduction")}</p>      <IntlayerProvider locale={locale}>        <ClientComponentExample />      </IntlayerProvider>      <IntlayerServerProvider locale={locale}>        <ServerComponentExample />      </IntlayerServerProvider>    </>  );};

src/components/ComponentExample.tsx

Salin kode

Salin kode ke clipboard

import type { FC } from "react";import { useI18n } from "react-intlayer";const ComponentExample: FC = () => {  const t = useI18n("component-example");  return (    <div>      <h1>{t("title")}</h1> {/* Tampilkan judul */}      <p>{t("description")}</p> {/* Tampilkan deskripsi */}    </div>  );};

import type { FC } from "react";import { useI18n } from "react-intlayer";const ComponentExample: FC = () => {  const t = useI18n("component-example");  return (    <div>      <h1>{t("title")}</h1> {/* Tampilkan judul */}      <p>{t("description")}</p> {/* Tampilkan deskripsi */}    </div>  );};

src/components/ServerComponentExample.tsx

Salin kode

Salin kode ke clipboard

jsx fileName="src/components/ServerComponentExample.jsx" codeFormat="esm"import { useI18n } from "react.intlayer/server";const ServerComponentExample = () => {  const t = useI18n("server-component");  return (    <div>      <h1>{t("title")}</h1> {/* Tampilkan judul */}      <p>{t("description")}</p> {/* Tampilkan deskripsi */}    </div>  );};

jsx fileName="src/components/ServerComponentExample.jsx" codeFormat="esm"import { useI18n } from "react.intlayer/server";const ServerComponentExample = () => {  const t = useI18n("server-component");  return (    <div>      <h1>{t("title")}</h1> {/* Tampilkan judul */}      <p>{t("description")}</p> {/* Tampilkan deskripsi */}    </div>  );};

Penanganan Atribut

Saat melokalisasi atribut, akses nilai terjemahan dengan tepat:

<!-- Untuk atribut aksesibilitas (misalnya, aria-label), gunakan .value karena diperlukan string murni --><button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>

<!-- Untuk atribut aksesibilitas (misalnya, aria-label), gunakan .value karena diperlukan string murni --><button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>

Sumber Daya Tambahan

Intlayer Visual Editor: Untuk pengalaman manajemen konten yang lebih intuitif, lihat dokumentasi editor visual di sini.

Bagian ini secara khusus membahas integrasi hook useI18n dalam aplikasi React, yang menyederhanakan proses lokalisasi dan memastikan konsistensi konten di berbagai locale.

Mengapa Intlayer?