Penulis:
    Dibuat:2025-09-22Terakhir diperbarui:2026-06-14

    Intlayer v8 Baru - Apa yang Baru?

    Selamat datang di Intlayer v8! Rilis ini berfokus pada peningkatan pengalaman pengembang dengan deteksi konten otomatis, memastikan integritas data melalui validasi skema, dan memberikan lebih banyak kontrol atas pengelolaan kamus.

    www.youtube.com

    Daftar Isi

    Evolusi Konten Kaya: Markdown & HTML

    Intlayer v8 membawa peningkatan besar pada cara penanganan konten kaya, memperkenalkan node HTML (yang tidak ada di v7) dan menyatukan API dengan node Markdown (yang ada di v7 tetapi telah ditingkatkan).

    API .use() yang Terpadu

    Kami memperkenalkan metode .use() untuk node Markdown dan HTML. Metode ini memungkinkan Anda menyesuaikan tag HTML atau komponen yang digunakan selama proses render.

    • Penggantian Komponen: Anda dapat dengan mudah mengganti tag HTML atau komponen kustom dengan komponen framework Anda sendiri (misalnya, mengganti <a> dengan NextLink atau <CustomCmp> dengan komponen React).
    • Keamanan Tipe (Type Safety): Semua fungsi untuk menyediakan komponen diketik sepenuhnya (fully typed), memastikan Anda menerima props yang benar.

    Perilaku Render Default

    Di v7, jika tidak ada provider yang didefinisikan, node Markdown dirender sebagai string mentah, seringkali membutuhkan library eksternal untuk memparsingnya.

    Di v8, Intlayer menyertakan parser Markdown internalnya sendiri. Secara default, node Markdown sekarang dirender langsung sebagai HTML tanpa memerlukan library eksternal apa pun.

    Utilitas Renderer & Provider Baru

    Kami telah memperkenalkan fungsi renderer dan komponen mandiri baru untuk memberi Anda kontrol lebih besar di luar alur standar useIntlayer.

    • Markdown: MarkdownRenderer, useMarkdownRenderer, renderMarkdown. (Catatan: MarkdownProvider sudah ada di v7 tetapi sekarang terintegrasi dengan alat-alat baru ini).
    • HTML: HTMLRenderer, useHTMLRenderer, renderHTML, HTMLProvider.

    Contoh: Alat Rendering Markdown

    1. Menggunakan Komponen:

    tsx
    import { MarkdownRenderer } from "react-intlayer/markdown";<MarkdownRenderer  forceBlock={true}  components={{    h1: ({ children }) => <h1 className="text-2xl">{children}</h1>  }}>  {"# My Title"}</MarkdownRenderer>

    2. Menggunakan Hook:

    tsx
    import { useMarkdownRenderer } from "react-intlayer/markdown";const renderMarkdown = useMarkdownRenderer({  components: {    h1: ({ children }) => <h1 className="text-red-500">{children}</h1>  }});return <div>{renderMarkdown("# My Title")}</div>;

    3. Menggunakan Fungsi Utilitas:

    tsx
    import { renderMarkdown } from "react-intlayer/markdown";const html = renderMarkdown("# My Title", {  forceBlock: true});

    Contoh: Alat Rendering HTML

    1. Menggunakan Komponen:

    tsx
    import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer  components={{    p: ({ children }) => <p className="mb-4">{children}</p>  }}>  {"<p>Hello World</p>"}</HTMLRenderer>

    2. Menggunakan Hook:

    tsx
    import { useHTMLRenderer } from "react-intlayer/html";const renderHTML = useHTMLRenderer({  components: {    strong: ({ children }) => <b className="font-bold">{children}</b>  }});return <div>{renderHTML("<p>Hello <strong>World</strong></p>")}</div>;

    3. Menggunakan Fungsi Utilitas:

    tsx
    import { renderHTML } from "react-intlayer/html";const html = renderHTML("<p>Hello World</p>");

    Untuk detail lebih lanjut, lihat Dokumentasi Konten HTML and Dokumentasi Markdown.

    File Konten YAML & Markdown (v8.10.0)

    Anda sekarang dapat mendeklarasikan konten secara langsung menggunakan ekstensi file .content.md dan .content.yaml. Ini sangat cocok untuk konten panjang, blog, dokumentasi, dan kebijakan privasi.

    File-file ini sepenuhnya dapat diedit dari Visual Editor, menyediakan alur kerja yang efisien untuk anggota tim non-teknis.

    Untuk detail lebih lanjut, lihat Dokumentasi File Konten YAML dan Dokumentasi File Konten Markdown.

    Penulisan Ulang URL Kustom

    Intlayer v8 memperkenalkan dukungan untuk Penulisan Ulang URL Kustom, yang memungkinkan Anda mendefinisikan jalur spesifik-locale yang berbeda dari struktur standar /locale/path. Ini adalah fitur yang kuat untuk meningkatkan SEO lokal dan memberikan pengalaman pengguna yang lebih alami bagi pengguna non-Inggris.

    Peningkatan utama di v8:

    • Framework Formatters: nextjsRewrite, svelteKitRewrite, reactRouterRewrite, vueRouterRewrite, solidRouterRewrite, tanstackRouterRewrite, nuxtRewrite, dan viteRewrite baru untuk menyediakan sintaks pola idiomatik bagi setiap router.
    • Hook useRewriteURL: Hook sisi klien baru yang secara diam-diam memperbaiki bilah alamat ke URL lokal yang "cantik" tanpa memicu navigasi router.
    • Automatic SEO Redirects: Proxy bawaan sekarang secara otomatis mengarahkan pengguna dari path kanonik yang diketik manual (mis. /fr/about) ke versi lokal yang lebih rapi (mis. /fr/a-propos).

    Contoh Konfigurasi:

    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";import { nextjsRewrite } from "intlayer/routing";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  routing: {    mode: "prefix-no-default",    rewrite: nextjsRewrite({      "/[locale]/about": {        fr: "/[locale]/a-propos",        es: "/[locale]/acerca-de",      },      "/[locale]/products/[id]": {        fr: "/[locale]/produits/[id]",        es: "/[locale]/productos/[id]",      },    }),  },};export default config;

    Fitur ini didukung langsung (out-of-the-box) di Next.js dan Vite melalui proxy Intlayer, dan dapat dengan mudah diintegrasikan ke router lain seperti TanStack Router, React Router, Vue Router, SvelteKit, dan Solid Router.

    Untuk informasi lebih lanjut dan panduan integrasi, lihat Dokumentasi Penulisan Ulang URL Kustom.

    Nilai Insertion yang Ditingkatkan

    Di v8, nilai insertion sekarang dapat menerima elemen React (atau node Vue) selain string dan angka. Ini memungkinkan Anda menyisipkan komponen interaktif yang kaya langsung ke dalam template insertion Anda.

    Intlayer sekarang secara andal menangani node React dan Preact yang bersarang di dalam insertions, memastikan bahwa struktur UI yang kompleks dipertahankan dan dirender dengan benar.

    Contoh:

    src/example.content.ts
    import { insert } from "intlayer";export default {  key: "my-key",  content: {    myInsertion: insert("Hi {{name}}"),  },};
    tsx
    import { useIntlayer } from "next-intlayer";const { myInsertion } = useIntlayer("my-key");return (  <div>    {myInsertion({      name: 2, // angka      // atau      name: "John", // string      // atau      name: <span>John</span>, // elemen React    })}  </div>);

    Aturan Jamak Unicode CLDR (v8.8.0)

    Helper node plural baru telah diperkenalkan berdasarkan aturan jamak yang didefinisikan oleh Unicode CLDR Project, meningkatkan dukungan untuk bahasa yang kompleks.

    src/openings.content.ts
    import { plural, t, type Dictionary } from "intlayer";const openingsContent = {  key: "total_openings",  content: {    totalOpenings: t({      id: plural({        other: "{{count}} lowongan",      }),      en: plural({        one: "{{count}} opening",        other: "{{count}} openings",      }),      fr: plural({        one: "{{count}} offre",        other: "{{count}} offres",      }),    }),  },} satisfies Dictionary;export default openingsContent;

    Anda kemudian dapat meneruskan jumlah (count) secara dinamis dalam komponen framework Anda:

    tsx
    import type { FC } from "react";import { useIntlayer } from "react-intlayer";const OpeningsComponent: FC<{ count: number }> = ({ count }) => {  const { totalOpenings } = useIntlayer("total_openings");  return (    <div>      {/* Dalam bahasa Inggris:                       */}      {/*  count=0  → "0 openings"   (other)           */}      {/*  count=1  → "1 opening"    (one)             */}      {/*  count=2  → "2 openings"   (other)           */}      {/*  count=21 → "21 openings"  (other)           */}      <p>{totalOpenings(count)}</p>    </div>  );};

    Untuk informasi lebih lanjut, lihat Dokumentasi Pluralisasi.

    Validasi Skema Konten

    Intlayer v8 memperkenalkan validasi skema untuk dictionaries. Sekarang Anda dapat mendefinisikan skema validasi yang dapat digunakan ulang dalam konfigurasi Anda menggunakan Zod dan menerapkannya pada file konten Anda. Ini memastikan konten Anda selalu sesuai dengan struktur yang diharapkan, sehingga menangkap kesalahan saat proses build.

    1. Definisikan Skema

    Definisikan skema Anda di intlayer.config.ts:

    intlayer.config.ts
    import { z } from "zod";export default {  schemas: {    "seo-metadata": z.object({      title: z.string().min(50).max(60),      description: z.string().min(150).max(160),    }),  },};

    2. Terapkan Skema ke Dictionaries

    Referensikan kunci skema dalam definisi dictionary Anda:

    src/example.content.ts
    import { type Dictionary } from "intlayer";const aboutPageMetaContent = {  key: "about-page-meta",  schema: "seo-metadata", // <--  content: {    title: "About Our Company - Learn More About Us",    description: "Discover our company's mission, values, and team.",  },} satisfies Dictionary;export default aboutPageMetaContent;

    Jika konten tidak cocok dengan skema (mis. judul terlalu pendek), proses build akan menghasilkan error.

    TypeScript: Aksesor Primitif IntlayerNode

    Tipe IntlayerNode telah diperbarui untuk memungkinkan pemanggilan metode JavaScript primitif secara langsung pada node konten. Ini memungkinkan Anda untuk berinteraksi dengan konten yang dilokalkan secara langsung seolah-olah itu adalah string, angka, boolean, atau array primitif standar.

    Didukung di React, Preact, Solid, Svelte, Vue, dan Angular.

    Contoh String

    typescript
    content.placeholder; // Mengembalikan IntlayerNode<string>content.placeholder.value; // Mengembalikan stringcontent.placeholder.toString(); // Mengembalikan stringcontent.placeholder.toLowerCase(); // Mengembalikan stringString(content.placeholder); // Mengembalikan stringcontent.placeholder.toUpperCase(); // Mengembalikan string yang diubah menjadi huruf besarcontent.placeholder.replace("a", "b"); // Mengembalikan string yang dimodifikasi

    Contoh Array

    typescript
    content.myArrayOfString             // Mengembalikan IntlayerNode<Array<string>>content.myArrayOfString.find(...)   // Mengembalikan elemencontent.myArrayOfString.join(', ')  // Mengembalikan string yang digabungkan

    Pendeteksian Konten Otomatis yang Ditingkatkan

    Di v8, Intlayer secara cerdas mendeteksi sintaks Markdown, tag HTML, dan penyisipan variabel dalam string konten Anda. Ini berarti Anda sering dapat menghilangkan fungsi pembantu seperti md(), html(), atau insert().

    Perilaku ini diaktifkan secara default. Anda sekarang dapat menyetel deteksi ini baik secara global di intlayer.config.ts atau per kamus.

    Kontrol Granular

    Anda dapat mengaktifkan atau menonaktifkan jenis transformasi tertentu:

    intlayer.config.ts
    export default {  dictionary: {    // contentAutoTransformation: false (nilai default)    contentAutoTransformation: {      markdown: true,      html: true,      insertion: false, // Nonaktifkan deteksi insertion otomatis    },  },};

    Perilaku v7 (Pembungkusan Manual):

    src/example.content.ts
    import { md, insert } from "intlayer";export default {  key: "my-key",  content: {    myMarkdown: md("## Hello World"),    myInsertion: insert("Hi {{name}}"),  },};

    Perilaku v8 (Deteksi otomatis):

    src/example.content.ts
    export default {  key: "my-key",  contentAutoTransformation: true, // Dapat juga diatur oleh definisi kamus atau secara global di intlayer.config.ts  content: {    myMarkdown: "## Hello World", // Otomatis terdeteksi sebagai Markdown    myHTML: "<p>Hello World</p>", // Otomatis terdeteksi sebagai HTML    myInsertion: "Hi {{name}}", // Otomatis terdeteksi sebagai Insertion  },};

    Hasil JSON dasar tetap sama, mempertahankan informasi tipe kaya yang diperlukan untuk rendering:

    json
    {  "key": "my-key",  "content": {    "myMarkdown": {      "nodeType": "markdown",      "markdown": "## Hello World"    },    "myHTML": {      "nodeType": "html",      "html": "<p>Hello World</p>"    },    "myInsertion": {      "nodeType": "insertion",      "insertion": "Hi {{name}}"    }  }}

    Lokalisasi: hook useIntl baru

    Hook useIntl() baru sekarang tersedia di React, Next.js dan Vue. Hook ini menyediakan objek Intl yang terikat pada locale yang secara otomatis menggunakan bahasa saat ini untuk memformat angka, tanggal, dan lainnya, tanpa perlu mengoper locale secara manual.

    tsx
    import { useIntl } from "next-intlayer";const intl = useIntl();const formattedPrice = new intl.NumberFormat({  style: "currency",  currency: "USD",}).format(123.45);

    Tooling: Peningkatan Ekstensi VSCode

    Ekstensi Intlayer untuk VSCode menerima pembaruan besar di v8 untuk menyederhanakan alur kerja internasionalisasi Anda:

    • Waktu Mulai: Peningkatan kinerja saat membuka proyek.
    • Caching: Lapisan caching yang ditingkatkan untuk validasi dan autocompletion hampir seketika.
    • Deteksi Kunci Tidak Terpakai & Duplikat: Fitur baru untuk secara otomatis mendeteksi kunci yang tidak terpakai dan kunci duplikat di seluruh kamus Anda, membantu menjaga konten tetap bersih dan efisien.

    Tooling: C++ Watcher & LSP Berbasis OXC (v8.12.0)

    Intlayer v8.12.0 membawa peningkatan besar pada pengalaman pengembang:

    • Parcel Watcher: Pemantau konten (content watcher) telah dimigrasikan dari chokidar ke @parcel/watcher, memanfaatkan pemantauan file C++ asli untuk memberikan pembaruan yang lebih cepat dan konsumsi memori yang jauh lebih rendah.
    • Language Server Protocol (LSP) Baru: LSP yang benar-benar baru kini telah tersedia. Dibangun dengan parsing berbasis OXC, ini membantu IDE dan agen AI Anda menghubungkan panggilan useIntlayer('my-key') secara mulus dengan file .content yang sesuai, dan sebaliknya.

    Untuk detail lebih lanjut, lihat Dokumentasi LSP.

    Optimisasi Kompiler

    Intlayer v8 menyertakan lapisan caching baru untuk compiler Markdown dan HTML. Ini memastikan bahwa string konten yang identik dengan konfigurasi yang sama hanya diparse sekali, secara signifikan mengurangi overhead selama re-render atau saat menggunakan konten yang sama di beberapa tempat.

    babel.config.js
      const {  intlayerExtractBabelPlugin,  intlayerOptimizeBabelPlugin,  getExtractPluginOptions,  getOptimizePluginOptions,} = require('@intlayer/babel');module.exports = {  presets: ['next/babel'],  plugins: [    // Ekstrak konten dari komponen ke dalam kamus    [intlayerExtractBabelPlugin, getExtractPluginOptions()],    // Optimalkan impor dengan mengganti useIntlayer menjadi impor kamus langsung    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],  ],};

    Optimisasi Build Eksperimental: Minify & Purge (v8.7.0)

    Intlayer v8.7.0 memperkenalkan fitur build eksperimental baru di intlayer.config.ts Anda yang dirancang untuk mengoptimalkan bundle produksi Anda:

    • Minifikasi Kamus (Dictionary Minification): Meminimalkan file kamus untuk memperkecil ukuran.
    • Pembersihan Kunci yang Tidak Digunakan (Unused Key Purging): Memindai dan menghapus kunci terjemahan yang tidak digunakan dari kamus, mengubah nama kunci aktif menjadi karakter pendek (mis. "products" -> "a", "pricing" -> "b"). Ini mengurangi ukuran bundle hingga 5%.
    • Menonaktifkan Pemeriksaan TypeScript: Mempercepat proses build dengan menonaktifkan typechecking TypeScript selama langkah kompilasi.
    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH],    defaultLocale: Locales.ENGLISH,  },  dictionary: {    importMode: "dynamic",  },  build: {    /**     * Minifikasi kamus untuk mengurangi ukuran bundle.     */    minify: true,    /**     * Bersihkan kunci yang tidak digunakan dalam kamus     */    purge: true,    /**     * Menunjukkan apakah build harus memeriksa tipe TypeScript     */    checkTypes: false,  },};export default config;

    Fleksibilitas: Mode Impor Terpadu

    Properti boolean live telah usang (deprecated) digantikan oleh properti importMode yang lebih komprehensif. Ini memungkinkan definisi eksplisit tentang bagaimana dictionary harus dimuat: secara statis, dinamis, atau melalui sinkronisasi langsung.

    Mode

    • static (Default): Dictionary dikemas pada saat build. Terbaik untuk performa.
    • dynamic: Dictionary dimuat saat runtime (misalnya melalui fetch JSON atau suspense).
    • fetch: Dictionary di-fetch dari CMS/Server saat runtime dan disinkronkan.

    Migrasi:

    Konfigurasi v7 Konfigurasi v8
    live: true importMode: 'fetch'
    live: false importMode: 'static' (atau 'dynamic')

    Catatan: Di Intlayer v8, properti importMode telah dipindahkan dari konfigurasi build ke konfigurasi dictionary di intlayer.config.ts. Ini memungkinkan Anda mendefinisikan import mode default untuk semua kamus Anda sambil tetap dapat menimpanya pada tingkat per-kamus.

    Contoh Konfigurasi Global:

    intlayer.config.ts
    export default {  dictionary: {    importMode: "dynamic", // Default untuk semua kamus  },  // ...};

    Contoh Kamus:

    src/example.content.ts
    export default {    key: 'my-key',    importMode: "fetch", // Menimpa konfigurasi global    content: { ... }}

    Kontrol Lokasi Kamus

    v8 memperkenalkan properti location untuk secara eksplisit mengelola di mana dictionary berada dan bagaimana mereka disinkronkan. Ini sangat berguna untuk alur kerja hibrida yang melibatkan file lokal dan konten CMS remote.

    Opsi

    • local: Dictionary hanya ada secara lokal. Ini tidak akan didorong ke CMS remote.
    • remote: Dictionary dikelola secara remote. Setelah didorong ke CMS, ia akan dipisahkan dari yang lokal. Dictionary remote akan ditarik dari CMS.
    • local_and_remote: Dictionary ada di kedua tempat. Perubahan lokal didorong, dan perubahan remote ditarik (disinkronkan).

    Contoh:

    src/example.content.ts
    export default {    key: 'my-key',    location: "local", // Biarkan dictionary ini hanya lokal    content: { ... }}

    Pemisahan Konfigurasi Sistem

    Intlayer v8 memisahkan konfigurasi sumber konten dari jalur sistem internal dan jalur output. Ini membersihkan properti content dan membuatnya jelas pengaturan mana yang dimaksudkan untuk dikelola pengguna versus yang dikelola oleh sistem Intlayer.

    Properti berikut telah dipindahkan dari content ke properti baru system di intlayer.config.ts:

    • dictionariesDir
    • moduleAugmentationDir
    • unmergedDictionariesDir
    • typesDir
    • mainDir
    • configDir
    • cacheDir
    • outputFilesPatternWithPath

    Perilaku v7:

    intlayer.config.ts
    export default {  content: {    contentDir: ["src"],    dictionariesDir: ".intlayer/dictionary", // Tercampur dengan konfigurasi sumber  },};

    Perilaku v8:

    intlayer.config.ts
    export default {  content: {    contentDir: ["src"],  },  system: {    dictionariesDir: ".intlayer/dictionary", // Dipisahkan dengan jelas  },};

    Pemisahan Direktori Konten dan Kode

    Intlayer v8 memisahkan konfigurasi untuk file definisi konten dari konfigurasi untuk transformasi kode. Ini memungkinkan pemantauan dan pemindaian yang lebih tepat, meningkatkan performa build.

    Sebelumnya, contentDir digunakan untuk kedua pemantauan file .content.* dan pemindaian kode untuk pemanggilan useIntlayer. Sekarang:

    • contentDir: Secara khusus untuk file deklarasi konten Anda.
    • codeDir: Secara khusus untuk kode aplikasi Anda yang membutuhkan transformasi (mis. pruning, optimasi).

    Migrasi:

    Jika sebelumnya Anda telah mengatur contentDir, Intlayer v8 akan menggunakannya sebagai default untuk codeDir juga, tetapi akan mencatat peringatan. Anda harus secara eksplisit mendefinisikan codeDir dalam konfigurasi Anda.

    Perilaku v7:

    intlayer.config.ts
    export default {  content: {    contentDir: ["src", "@packages/design-system"], // Digunakan untuk konten dan kode  },};

    Perilaku v8:

    intlayer.config.ts
    export default {  content: {    contentDir: ["src/content", "@packages/design-system"], // Hanya memantau file src/content/*.content.* di sini dan file @packages/design-system/dist/*.content.*    codeDir: ["src", "@packages/design-system"], // Hanya memindai untuk transformasi kode di sini  },};

    Framework: Peningkatan Svelte

    Konten Markdown dan HTML di Svelte sekarang secara otomatis di-parse menjadi HTML saat distringifikasi. Hal ini membuatnya jauh lebih mudah digunakan dengan sintaks {@html} Svelte, karena Anda sekarang dapat langsung meneruskan node konten.

    Dukungan Angular: Vite Bundler (v8.11.0)

    Untuk pengguna Angular, Intlayer sekarang secara native mendukung bundler Vite melalui plugin esbuild kustom baru, mempercepat waktu pengembangan dan build.

    Untuk detail tentang konfigurasi, lihat Dokumentasi Lingkungan Angular.

    Pembuatan Sitemap (v8.6.0)

    Intlayer sekarang menghasilkan sitemap secara otomatis berdasarkan locale dan mode routing Anda. Ini sangat berguna untuk optimisasi SEO dalam arsitektur router seperti TanStack Router:

    src/routes/sitemap.xml.ts
    import { createFileRoute } from "@tanstack/react-router";import { generateSitemap } from "intlayer";const SITE_URL = (  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000").replace(/\/$/, "");export const Route = createFileRoute("/sitemap.xml")({  server: {    handlers: {      GET: async () => {        const sitemap = generateSitemap(          [            { path: "/", changefreq: "daily", priority: 1.0 },            { path: "/about", changefreq: "monthly", priority: 0.8 },          ],          { siteUrl: SITE_URL }        );        return new Response(sitemap, {          headers: { "Content-Type": "application/xml" },        });      },    },  },});

    Catatan migrasi dari v7

    Perubahan Konfigurasi

    • Properti live: Properti live pada kamus telah dihapus. Gunakan importMode: 'fetch' sebagai gantinya.
    • importMode: Properti build.importMode dalam konfigurasi sudah deprecated. Gunakan dictionary.importMode sebagai gantinya.
    • contentDir dan codeDir: contentDir sekarang secara khusus untuk file konten. Properti baru codeDir ditambahkan untuk transformasi kode. Jika codeDir tidak diatur, Intlayer akan menggunakan contentDir sebagai fallback dan menampilkan peringatan di log.
    • Validasi Skema: Untuk menggunakan fitur schema baru, pastikan Anda telah menginstal zod di proyek Anda.

    Tautan berguna

    v9
    v7