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

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

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>;

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;

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;

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;

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

Penumeraan