Penulis:
    Aymeric PINEAU
    Dibuat:2025-08-23Terakhir diperbarui:2025-08-23

    Dokumentasi Intlayer

    Selamat datang di dokumentasi resmi Intlayer! Di sini, Anda akan menemukan semua yang Anda butuhkan untuk mengintegrasikan, mengonfigurasi, dan menguasai Intlayer untuk semua kebutuhan internasionalisasi (i18n) Anda, baik Anda bekerja dengan Next.js, React, Vite, Express, atau lingkungan JavaScript lainnya.

    Pengenalan

    Apa itu Intlayer?

    Intlayer adalah pustaka internasionalisasi yang dirancang khusus untuk pengembang JavaScript. Ini memungkinkan deklarasi konten Anda di mana saja di dalam kode Anda. Intlayer mengubah deklarasi konten multibahasa menjadi kamus terstruktur untuk diintegrasikan dengan mudah ke dalam kode Anda. Dengan menggunakan TypeScript, Intlayer membuat pengembangan Anda lebih tangguh dan efisien.

    Intlayer juga menyediakan editor visual opsional yang memungkinkan Anda mengedit dan mengelola konten Anda dengan mudah. Editor ini sangat berguna bagi pengembang yang lebih menyukai antarmuka visual untuk manajemen konten, atau untuk tim yang membuat konten tanpa perlu khawatir tentang kode.

    Contoh Penggunaan

    bash
    .
└── Components
    └── MyComponent
        ├── index.content.ts
        └── index.tsx
    src/components/MyComponent/index.content.ts
    import { t, type Dictionary } from "intlayer";

const componentContent = {
  key: "component-key",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
      id: "Halo Dunia",
    }),
  },
} satisfies Dictionary;

export default componentContent;
    src/components/MyComponent/index.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

export const MyComponent: FC = () => {
  const { myTranslatedContent } = useIntlayer("component-key");

  return <span>{myTranslatedContent}</span>;
};

    Mengapa Intlayer daripada alternatif lain?

    Dibandingkan dengan solusi utama seperti next-intl atau i18next, Intlayer adalah solusi yang hadir dengan optimasi terintegrasi seperti:

    Daripada memuat file JSON besar ke halaman Anda, muat hanya konten yang diperlukan. Intlayer membantu mengurangi ukuran bundel dan halaman Anda hingga 50%.

    Menempatkan cakupan (scoping) konten aplikasi Anda di dekat komponen memudahkan pemeliharaan untuk aplikasi skala besar. Anda dapat menduplikasi atau menghapus folder fitur tunggal tanpa beban mental untuk meninjau seluruh basis kode konten Anda. Selain itu, Intlayer sepenuhnya diketik (fully typed) untuk memastikan keakuratan konten Anda.

    Penempatan konten yang berdekatan (co-location) mengurangi konteks yang dibutuhkan oleh Model Bahasa Besar (LLM). Intlayer juga dilengkapi dengan serangkaian alat, seperti CLI untuk menguji terjemahan yang hilang, LSP, MCP, dan agent skills, untuk membuat pengalaman pengembang (DX) menjadi lebih mulus bagi agen AI.

    Gunakan otomatisasi untuk menerjemahkan di jalur (pipeline) CI/CD Anda menggunakan LLM pilihan Anda dengan biaya dari penyedia AI Anda. Intlayer juga menawarkan kompiler (compiler) untuk mengotomatiskan ekstraksi konten, serta platform web untuk membantu menerjemahkan di latar belakang.

    Menghubungkan file JSON besar ke komponen dapat menyebabkan masalah kinerja dan reaktivitas. Intlayer mengoptimalkan pemuatan konten Anda pada saat kompilasi (build time).

    Lebih dari sekadar solusi i18n, Intlayer menyediakan editor visual yang dapat di-host sendiri dan CMS lengkap untuk membantu Anda mengelola konten multibahasa Anda secara real-time, membuat kolaborasi dengan penerjemah, copywriter, dan anggota tim lainnya menjadi mulus. Konten dapat disimpan secara lokal dan/atau dari jarak jauh.

    Fitur Utama

    Intlayer menawarkan berbagai fitur yang disesuaikan untuk memenuhi kebutuhan pengembangan web modern. Di bawah ini adalah fitur-fitur utama, dengan tautan ke dokumentasi terperinci untuk masing-masing fitur:

    • Dukungan Internasionalisasi: Tingkatkan jangkauan global aplikasi Anda dengan dukungan internasionalisasi bawaan.
    • Editor Visual: Tingkatkan alur kerja pengembangan Anda dengan plugin editor yang dirancang untuk Intlayer. Lihat Panduan Editor Visual.
    • Fleksibilitas Konfigurasi: Sesuaikan pengaturan Anda dengan opsi konfigurasi ekstensif yang dirinci di Panduan Konfigurasi.
    • Alat CLI Canggih: Kelola proyek Anda secara efisien menggunakan antarmuka baris perintah (CLI) Intlayer. Jelajahi kemampuannya di Dokumentasi Alat CLI.

    Konsep Inti

    Kamus (Dictionary)

    Atur konten multibahasa Anda di dekat kode Anda untuk menjaga semuanya tetap konsisten dan mudah dikelola.

    Lingkungan & Integrasi

    Kami membangun Intlayer dengan mempertimbangkan fleksibilitas, menawarkan integrasi yang mulus di berbagai framework dan alat build populer:

    Setiap panduan integrasi mencakup praktik terbaik untuk menggunakan fitur Intlayer, seperti perenderan sisi server (SSR), perutean dinamis, atau perenderan sisi klien, sehingga Anda dapat mempertahankan aplikasi yang cepat, ramah SEO, dan sangat skalabel.

    Kontribusi & Umpan Balik

    Kami menghargai kekuatan open-source dan pengembangan berbasis komunitas. Jika Anda ingin mengusulkan perbaikan, menambahkan panduan baru, atau memperbaiki masalah apa pun di dokumen kami, jangan ragu untuk mengirimkan Pull Request atau membuka Issue di repositori GitHub kami.

    Siap menerjemahkan aplikasi Anda dengan lebih cepat dan lebih efisien? Selami dokumen kami untuk mulai menggunakan Intlayer sekarang. Rasakan pendekatan yang kuat dan efisien untuk internasionalisasi yang membuat konten Anda tetap teratur dan tim Anda lebih produktif.

    Pertanyaan yang Sering Diajukan

    Intlayer adalah library internasionalisasi (i18n) untuk aplikasi JavaScript dan TypeScript. Anda mendeklarasikan konten komponen tepat di sebelah komponen tersebut dalam file .content.ts, Intlayer mengompilasi deklarasi tersebut menjadi kamus bertipe saat build time, dan komponen Anda membacanya melalui hook seperti useIntlayer. Ini mencakup terjemahan, aturan jamak, gender, Markdown, routing berbasis locale, metadata SEO, terjemahan dengan bantuan AI, dan editor visual untuk non-developer.

    Jauh lebih sedikit daripada pengaturan berbasis namespace, karena halaman tidak pernah mengunduh katalog yang tidak di-render. Markup yang dirender di server menyelesaikan kontennya di server, dan kompilator build time mengganti panggilan useIntlayer dengan entri kamus persis yang digunakan komponen, sehingga kunci dan bahasa yang tidak digunakan dibuang. Kamus dinamis membagi sisanya per locale. Dibandingkan dengan alternatif konvensional, Intlayer mengurangi ukuran bundle dan halaman hingga 50%. Lihat optimasi bundle dan benchmark.

    Ya, dan ada dua jalur. Anda dapat memigrasikan konten secara bertahap dengan panduan migrasi i18next atau panduan migrasi next-intl. Atau Anda dapat mempertahankan API Anda saat ini sepenuhnya: adapter kompatibilitas mengekspos API yang sama persis dengan i18next, react-i18next, next-intl, next-i18next, react-intl, use-intl, vue-i18n dan Lingui, tetapi ditenagai oleh kamus Intlayer, sehingga hanya import yang berubah dan kode komponen tetap sama.

    Ya. Plugin sync JSON menjaga file /messages/{locale}/{namespace}.json Anda sebagai sumber kebenaran dan menghasilkan kamus Intlayer darinya, di kedua arah. Plugin sync PO melakukan hal yang sama untuk katalog gettext, dan file per locale memungkinkan Anda membagi konten berdasarkan bahasa daripada mengelompokkan lokal dalam satu file.

    Tidak. Jalankan npx intlayer extract dan Intlayer membaca file sumber Anda, mengeluarkan string yang dihadapi pengguna, dan menulis file .content di sebelah masing-masing, sehingga Anda meninjau diff alih-alih menyalin string ke dalam katalog satu per satu. Lihat perintah extract.

    Untuk alur kerja yang sepenuhnya otomatis, Intlayer Compiler melakukan hal yang sama saat build time pada kode JSX, TSX, Vue dan Svelte, menghasilkan kamus pada setiap perubahan sehingga tidak ada kunci yang perlu dikelola secara manual. Karena bekerja melalui analisis statis, string yang hanya ada di runtime berada di luar jangkauannya.

    Lima bagian, semuanya opsional:

    • Ekstensi VS Code: lompat dari kunci useIntlayer ke file konten yang mendeklarasikannya, ekstrak konten dari komponen, dan jalankan build, fill, test, push dan pull dari command palette atau tab Intlayer.
    • Server LSP: kesadaran yang sama di editor mana pun yang mendukung LSP, dengan go to definition, hover preview dari nilai terjemahan, autocompletion kunci, dan peringatan ketika kunci tidak dideklarasikan di mana pun. Ini juga menyelesaikan panggilan i18next, react-i18next, next-intl dan use-intl.
    • Server MCP: mengekspos dokumentasi Intlayer dan CLI ke Cursor, VS Code, Claude Desktop, Claude Code dan ChatGPT.
    • Agent skills: keahlian terfokus seperti intlayer-config, intlayer-cli dan intlayer-content.
    • Plugin ESLint: aturan no-raw-text menandai string hardcoded.
    Mengapa Intlayer?Bagaimana Intlayer bekerja