Deklarasi Konten Per-Locale di Intlayer

Intlayer mendukung dua cara untuk mendeklarasikan konten multibahasa:

• Satu file dengan semua terjemahan
• Satu file per locale (format per-locale)

Fleksibilitas ini memungkinkan:

• Migrasi mudah dari alat i18n lainnya
• Dukungan untuk alur kerja terjemahan otomatis
• Organisasi terjemahan yang jelas ke dalam file terpisah berdasarkan locale

Satu File dengan Banyak Terjemahan

Format ini ideal untuk:

• Iterasi cepat dalam kode.
• Integrasi mulus dengan CMS.

Ini adalah pendekatan yang direkomendasikan untuk sebagian besar kasus penggunaan. Format ini memusatkan terjemahan, sehingga memudahkan iterasi dan integrasi dengan CMS.

import { t, type Dictionary } from "intlayer";const helloWorldContent = {  key: "hello-world",  content: {    multilingualContent: t({      en: "Title of my component",      es: "Título de mi componente",    }),  },} satisfies Dictionary;export default helloWorldContent;

Direkomendasikan: Format ini paling baik digunakan saat memakai editor visual Intlayer atau mengelola terjemahan langsung di dalam kode.

Format Per-Locale

Format ini berguna ketika:

• Anda ingin melakukan versioning atau menimpa terjemahan secara independen.
• Anda mengintegrasikan alur kerja terjemahan mesin atau manusia.

Anda juga dapat memisahkan terjemahan ke dalam file locale individual dengan menentukan field locale:

import { t, Locales, type Dictionary } from "intlayer";const helloWorldContent = {  key: "hello-world",  locale: Locales.ENGLISH, // Penting  content: { multilingualContent: "Title of my component" },} satisfies Dictionary;export default helloWorldContent;

import { t, Locales, type Dictionary } from "intlayer";const helloWorldContent = {  key: "hello-world",  locale: Locales.SPANISH, // Penting  content: { multilingualContent: "Título de mi componente" },} satisfies Dictionary;export default helloWorldContent;

Penting: Pastikan field locale didefinisikan. Ini memberitahu Intlayer bahasa apa yang diwakili oleh file tersebut.

Catatan: Dalam kedua kasus, file deklarasi konten harus mengikuti pola penamaan *.content.{ts,tsx,js,jsx,mjs,cjs,json} agar dikenali oleh Intlayer. Sufiks .[locale] bersifat opsional dan hanya digunakan sebagai konvensi penamaan.

Menggabungkan Format

Anda dapat menggabungkan kedua pendekatan deklarasi untuk kunci konten yang sama. Sebagai contoh:

• Deklarasikan konten dasar Anda secara statis dalam file seperti index.content.ts.
• Tambahkan atau timpa terjemahan spesifik dalam file terpisah seperti index.fr.content.ts atau index.content.json.

Pengaturan ini sangat berguna ketika:

• Anda ingin mendefinisikan struktur konten awal dalam kode.
• Anda berencana untuk memperkaya atau melengkapi terjemahan nanti menggunakan CMS atau alat otomatis.

.└── Components    └── MyComponent        ├── index.content.ts        ├── index.content.json        └── index.ts

Contoh

Berikut adalah file deklarasi konten multibahasa:

import { t, type Dictionary } from "intlayer";const helloWorldContent = {  key: "hello-world",  locale: Locales.ENGLISH,  content: {    multilingualContent: "Judul komponen saya",    projectName: "Proyek saya",  },} satisfies Dictionary;export default helloWorldContent;

{  "$schema": "https://intlayer.org/schema.json",  "key": "hello-world",  "content": {    "multilingualContent": {      "nodeType": "translation",      "translation": {        "fr": "Titre de mon composant",        "es": "Título de mi componente"      }    }  }}

Intlayer menggabungkan file multibahasa dan per-locale secara otomatis.

import { getIntlayer, Locales } from "intlayer";const intlayer = getIntlayer("hello-world"); // Default locale adalah ENGLISH, jadi ini akan mengembalikan konten dalam bahasa ENGLISHconsole.log(JSON.stringify(intlayer, null, 2));// Hasil:// {//  "multilingualContent": "Judul komponen saya",//  "projectName": "Proyek saya"// }const intlayer = getIntlayer("hello-world", Locales.SPANISH);console.log(JSON.stringify(intlayer, null, 2));// Hasil:// {//  "multilingualContent": "Título de mi componente",//  "projectName": "Proyek saya"// }const intlayer = getIntlayer("hello-world", Locales.FRENCH);console.log(JSON.stringify(intlayer, null, 2));// Hasil:// {//  "multilingualContent": "Titre de mon composant",//  "projectName": "Proyek saya"// }

Pembuatan Terjemahan Otomatis

Gunakan intlayer CLI untuk mengisi otomatis terjemahan yang hilang berdasarkan layanan yang Anda pilih.