Fungsi t dalam intlayer memungkinkan Anda untuk mendeklarasikan konten dalam berbagai bahasa. Fungsi ini memastikan keamanan tipe, memberikan error jika ada terjemahan yang hilang, yang sangat berguna dalam lingkungan TypeScript.

Berikut adalah contoh cara mendeklarasikan konten dengan terjemahan.

**/*.content.ts

Salin kode

Salin kode ke clipboard

import { t, type Dictionary } from "intlayer";

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      en: "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
    }),
  },
} satisfies Dictionary<Content>;

Konfigurasi untuk Lokal

Untuk memastikan penanganan terjemahan yang tepat, Anda dapat mengonfigurasi lokal yang diterima di intlayer.config.ts. Konfigurasi ini memungkinkan Anda untuk menentukan bahasa yang didukung oleh aplikasi Anda:

intlayer.config.ts

Salin kode

Salin kode ke clipboard

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

Menggunakan Terjemahan dalam Komponen React

Dengan react-intlayer, Anda dapat menggunakan terjemahan dalam komponen React. Berikut adalah contohnya:

**/*.tsx

Salin kode

Salin kode ke clipboard

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

const MyComponent: FC = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

Komponen ini mengambil terjemahan yang sesuai berdasarkan locale saat ini yang diatur dalam aplikasi Anda.

Objek Konten Kustom

intlayer mendukung objek konten kustom untuk terjemahan, memungkinkan Anda mendefinisikan struktur yang lebih kompleks sekaligus memastikan keamanan tipe. Berikut adalah contoh dengan objek kustom:

**/*.content.ts

Salin kode

Salin kode ke clipboard

import { t, type Dictionary } from "intlayer";

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      fr: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
      es: {
        title: "Título de la Página",
        content: "Contenido de la Página",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;

Deklarasi konten

Plural

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

Referensikan dokumen ini ke asisten AI favorit Anda

ChatGPT

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

Riwayat Versi

"Inisialisasi riwayat"
v5.5.1029/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

Terjemahan

Mendefinisikan Terjemahan

Berikut adalah contoh cara mendeklarasikan konten dengan terjemahan.

**/*.content.ts

Salin kode

Salin kode ke clipboard

import { t, type Dictionary } from "intlayer";

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      en: "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
    }),
  },
} satisfies Dictionary<Content>;

Konfigurasi untuk Lokal

intlayer.config.ts

Salin kode

Salin kode ke clipboard

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

Menggunakan Terjemahan dalam Komponen React

Dengan react-intlayer, Anda dapat menggunakan terjemahan dalam komponen React. Berikut adalah contohnya:

**/*.tsx

Salin kode

Salin kode ke clipboard

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

const MyComponent: FC = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

Komponen ini mengambil terjemahan yang sesuai berdasarkan locale saat ini yang diatur dalam aplikasi Anda.

Objek Konten Kustom

intlayer mendukung objek konten kustom untuk terjemahan, memungkinkan Anda mendefinisikan struktur yang lebih kompleks sekaligus memastikan keamanan tipe. Berikut adalah contoh dengan objek kustom:

**/*.content.ts

Salin kode

Salin kode ke clipboard

import { t, type Dictionary } from "intlayer";

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      fr: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
      es: {
        title: "Título de la Página",
        content: "Contenido de la Página",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;

Deklarasi konten

Plural