@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.2

package/docs/vi/dictionary/translation.md

@@ -85,7 +85,10 @@ export default config;
 
 ## Sử dụng Dịch thuật trong Các Thành phần React
 
-Với `react-intlayer`, bạn có thể sử dụng các bản dịch trong các thành phần React. Dưới đây là một ví dụ:
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+With `react-intlayer`, you can use translations in React components. Here's an example:
 
 ```jsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -104,7 +107,158 @@ const MyComponent: FC = () => {
 export default MyComponent;
 ```
 
-Thành phần này lấy bản dịch tương ứng dựa trên locale hiện tại được thiết lập trong ứng dụng của bạn.
+This component fetches the corresponding translation based on the current locale set in your application.
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+With `next-intlayer`, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const MyComponent: FC = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+With `vue-intlayer`, you can use translations in Vue components. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const content = useIntlayer("multi_lang");
+</script>
+
+<template>
+  <div>
+    <p>{{ content.welcomeMessage }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+With `svelte-intlayer`, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("multi_lang");
+</script>
+
+<div>
+  <p>{$content.welcomeMessage}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+With `preact-intlayer`, you can use translations in Preact components. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const MyComponent: FC = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+With `solid-intlayer`, you can use translations in SolidJS components. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const MyComponent: Component = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+With `angular-intlayer`, you can use translations in Angular components. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-my-component",
+  template: `
+    <div>
+      <p>{{ content().welcomeMessage }}</p>
+    </div>
+  `,
+})
+export class MyComponent {
+  content = useIntlayer("multi_lang");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+With `vanilla-intlayer`, you can use translations by subscribing to content changes. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("multi_lang").onChange((newContent) => {
+  document.getElementById("welcome-message")!.textContent = String(
+    newContent.welcomeMessage
+  );
+});
+
+// Initial render
+document.getElementById("welcome-message")!.textContent = String(
+  content.welcomeMessage
+);
+```
+
+  </Tab>
+</Tabs>
 
 ## Đối tượng Nội dung Tùy chỉnh
 

package/docs/vi/dynamic_dictionaries/collections.md

@@ -14,7 +14,7 @@ slugs:
   - concept
   - collections
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Phát hành tính năng từ điển bộ sưu tập"
 author: aymericzip

package/docs/vi/dynamic_dictionaries/dynamic_content.md

@@ -15,7 +15,7 @@ slugs:
   - concept
   - dynamic-records
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Phát hành tính năng nội dung động"
 author: aymericzip

package/docs/vi/dynamic_dictionaries/index.md

@@ -15,7 +15,7 @@ slugs:
   - concept
   - dynamic-dictionaries
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Phát hành tính năng từ điển động"
 author: aymericzip

package/docs/vi/dynamic_dictionaries/variants.md

@@ -15,7 +15,7 @@ slugs:
   - concept
   - variants
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Phát hành tính năng từ điển biến thể"
 author: aymericzip

package/docs/vi/releases/v8.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-22
-updatedAt: 2026-01-26
+updatedAt: 2026-06-14
 title: Intlayer v8. Có gì mới?
 description: Khám phá những điểm mới trong Intlayer v8. Cải tiến chính về trải nghiệm nhà phát triển, xác thực theo schema và quản lý từ điển.
 keywords:
@@ -409,6 +409,16 @@ Chúng tôi đã giới thiệu các hàm renderer và component độc lập m
 
 ---
 
+## Tệp Nội dung YAML & Markdown (v8.10.0)
+
+Giờ đây, bạn có thể khai báo nội dung trực tiếp bằng các phần mở rộng tệp `.content.md` và `.content.yaml`. Điều này hoàn hảo cho nội dung dạng dài, blog, tài liệu và chính sách bảo mật.
+
+Các tệp này hoàn toàn có thể chỉnh sửa từ Visual Editor, mang lại quy trình làm việc hợp lý cho các thành viên không thuộc nhóm kỹ thuật.
+
+Để biết thêm chi tiết, xem [Tài liệu Tệp Nội dung YAML](https://intlayer.org/doc/concept/content#yaml-content-file) và [Tài liệu Tệp Nội dung Markdown](https://intlayer.org/doc/concept/content/markdown).
+
+---
+
 ## Viết lại URL tùy chỉnh
 
 Intlayer v8 giới thiệu hỗ trợ cho **Viết lại URL tùy chỉnh**, cho phép bạn định nghĩa các đường dẫn theo ngôn ngữ (locale) khác với cấu trúc chuẩn `/locale/path`. Đây là một tính năng mạnh mẽ để cải thiện SEO địa phương và mang lại trải nghiệm người dùng tự nhiên hơn cho những người không nói tiếng Anh.
@@ -753,6 +763,61 @@ export default {
   </Tab>
 </Tabs>
 
+## Quy tắc số nhiều Unicode CLDR (v8.8.0)
+
+Một helper nút `plural` mới đã được giới thiệu dựa trên các quy tắc số nhiều được định nghĩa bởi Dự án Unicode CLDR, giúp cải thiện hỗ trợ cho các ngôn ngữ phức tạp.
+
+```typescript fileName="src/openings.content.ts"
+import { plural, t, type Dictionary } from "intlayer";
+
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      vi: plural({
+        other: "{{count}} cơ hội",
+      }),
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      fr: plural({
+        one: "{{count}} offre",
+        other: "{{count}} offres",
+      }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default openingsContent;
+```
+
+Sau đó, bạn có thể truyền số lượng một cách động trong component framework của mình:
+
+```tsx
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
+  const { totalOpenings } = useIntlayer("total_openings");
+
+  return (
+    <div>
+      {/* Trong tiếng Anh:                             */}
+      {/*  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>
+  );
+};
+```
+
+Để biết thêm thông tin, xem [Tài liệu Đa dạng hóa (Pluralization)](https://intlayer.org/doc/concept/content/plural).
+
+---
+
 ## Xác thực Schema Nội dung
 
 Intlayer v8 giới thiệu tính năng xác thực schema cho các dictionaries. Bây giờ bạn có thể định nghĩa các schema xác thực có thể tái sử dụng trong cấu hình của mình bằng Zod và áp dụng chúng cho các file nội dung. Điều này đảm bảo nội dung của bạn luôn tuân theo cấu trúc mong đợi, giúp phát hiện lỗi trong quá trình build.
@@ -797,6 +862,34 @@ Nếu nội dung không khớp với schema (ví dụ: title quá ngắn), quá
 
 ---
 
+## TypeScript: Các bộ truy cập nguyên bản IntlayerNode
+
+Kiểu `IntlayerNode` đã được cập nhật để cho phép gọi trực tiếp các phương thức JavaScript nguyên bản (primitive) trên các nút nội dung. Điều này giúp bạn có thể tương tác trực tiếp với nội dung đã được bản địa hóa của mình như thể nó là một chuỗi, số, boolean hoặc mảng nguyên bản tiêu chuẩn.
+
+Được hỗ trợ trên React, Preact, Solid, Svelte, Vue và Angular.
+
+### Ví dụ về Chuỗi (String)
+
+```typescript
+content.placeholder; // Trả về IntlayerNode<string>
+content.placeholder.value; // Trả về string
+content.placeholder.toString(); // Trả về string
+content.placeholder.toLowerCase(); // Trả về string
+String(content.placeholder); // Trả về string
+content.placeholder.toUpperCase(); // Trả về chuỗi viết hoa
+content.placeholder.replace("a", "b"); // Trả về chuỗi đã sửa đổi
+```
+
+### Ví dụ về Mảng (Array)
+
+```typescript
+content.myArrayOfString             // Trả về IntlayerNode<Array<string>>
+content.myArrayOfString.find(...)   // Trả về phần tử
+content.myArrayOfString.join(', ')  // Trả về chuỗi được nối
+```
+
+---
+
 ### Phát hiện nội dung tự động nâng cao
 
 Trong v8, Intlayer tự động nhận diện thông minh cú pháp Markdown, thẻ HTML và các chèn biến trong các chuỗi nội dung của bạn. Điều này có nghĩa là bạn thường có thể bỏ qua các hàm trợ giúp như `md()`, `html()` hoặc `insert()`.
@@ -1002,6 +1095,17 @@ Phần mở rộng Intlayer cho VSCode nhận được các cập nhật lớn t
 
 ---
 
+## Công cụ: C++ Watcher & OXC-based LSP (v8.12.0)
+
+Intlayer v8.12.0 mang lại những cải tiến lớn cho trải nghiệm nhà phát triển:
+
+- **Parcel Watcher**: Trình theo dõi nội dung (content watcher) đã được di chuyển từ `chokidar` sang `@parcel/watcher`, tận dụng tính năng theo dõi tệp C++ gốc để cung cấp các bản cập nhật nhanh hơn và giảm đáng kể mức tiêu thụ bộ nhớ.
+- **Language Server Protocol (LSP) mới**: Một LSP hoàn toàn mới hiện đã sẵn sàng. Được xây dựng với phân tích cú pháp dựa trên OXC, nó giúp IDE và các tác nhân AI của bạn liên kết liền mạch các lệnh gọi `useIntlayer('my-key')` với các tệp `.content` tương ứng của chúng và ngược lại.
+
+Để biết thêm chi tiết, xem [Tài liệu LSP](https://intlayer.org/doc/lsp).
+
+---
+
 ## Tối ưu trình biên dịch
 
 Intlayer v8 bao gồm một lớp cache mới cho trình biên dịch Markdown và HTML. Điều này đảm bảo rằng các chuỗi nội dung giống hệt với cùng cấu hình chỉ được phân tích một lần, giảm đáng kể chi phí khi tái kết xuất hoặc khi sử dụng cùng nội dung ở nhiều nơi.
@@ -1057,6 +1161,48 @@ Intlayer v8 bao gồm một lớp cache mới cho trình biên dịch Markdown v
 
 ---
 
+## Tối ưu hóa Build Thử nghiệm: Minify & Purge (v8.7.0)
+
+Intlayer v8.7.0 giới thiệu các tính năng build thử nghiệm mới trong `intlayer.config.ts` của bạn được thiết kế để tối ưu hóa bundle production của bạn:
+
+- **Thu nhỏ từ điển (Dictionary Minification)**: Thu nhỏ các tệp từ điển để giảm kích thước.
+- **Loại bỏ khóa không sử dụng (Unused Key Purging)**: Quét và loại bỏ các khóa dịch không sử dụng khỏi từ điển, đổi tên các khóa đang hoạt động thành các ký tự ngắn (ví dụ: `"products" -> "a"`, `"pricing" -> "b"`). Điều này giúp giảm kích thước bundle lên tới 5%.
+- **Vô hiệu hóa kiểm tra TypeScript**: Tăng tốc độ build bằng cách vô hiệu hóa kiểm tra kiểu dữ liệu (typechecking) TypeScript trong bước biên dịch.
+
+```typescript fileName="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: {
+    /**
+     * Thu nhỏ các từ điển để giảm kích thước bundle.
+     */
+    minify: true,
+
+    /**
+     * Loại bỏ các khóa không sử dụng trong từ điển
+     */
+    purge: true,
+
+    /**
+     * Cho biết liệu quá trình build có nên kiểm tra các kiểu TypeScript hay không
+     */
+    checkTypes: false,
+  },
+};
+
+export default config;
+```
+
+---
+
 ## Tính linh hoạt: Chế độ import hợp nhất
 
 Thuộc tính boolean `live` đã bị đánh dấu là deprecated và được thay bằng thuộc tính `importMode` toàn diện hơn. Điều này cho phép xác định rõ ràng cách các dictionary nên được tải: theo kiểu tĩnh, động, hoặc qua đồng bộ trực tiếp.
@@ -1204,6 +1350,49 @@ Nội dung Markdown và HTML trong Svelte bây giờ tự động được phân
 
 ---
 
+## Hỗ trợ Angular: Vite Bundler (v8.11.0)
+
+Đối với người dùng Angular, Intlayer hiện hỗ trợ nguyên bản trình đóng gói Vite thông qua một plugin esbuild tùy chỉnh mới, giúp tăng tốc thời gian phát triển và build.
+
+Để biết chi tiết về cấu hình, xem [Tài liệu Môi trường Angular](https://intlayer.org/doc/environment/angular).
+
+---
+
+## Tạo Sitemap (v8.6.0)
+
+Intlayer hiện tự động tạo sitemap dựa trên các locale và chế độ định tuyến (routing mode) của bạn. Điều này đặc biệt hữu ích cho việc tối ưu hóa SEO trong các kiến trúc router như TanStack Router:
+
+```typescript fileName="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" },
+        });
+      },
+    },
+  },
+});
+```
+
+---
+
 ## Ghi chú nâng cấp từ v7
 
 ### Thay đổi cấu hình

package/docs/vi/releases/v9.md

@@ -0,0 +1,232 @@
+---
+createdAt: 2026-06-14
+updatedAt: 2026-06-14
+title: Intlayer v9 Mới - Có gì mới?
+description: Khám phá các tính năng mới trong Intlayer v9. Giới thiệu các package tương thích drop-in cho các thư viện i18n phổ biến và hỗ trợ Collections, Variants, và Dynamic Records.
+keywords:
+  - Intlayer
+  - Compatibility
+  - Migration
+  - Collections
+  - Variants
+  - Dynamic Records
+  - i18next
+  - next-intl
+  - vue-i18n
+slugs:
+  - doc
+  - releases
+  - v9
+author: aymericzip
+---
+
+# Intlayer v9 Mới - Có gì mới?
+
+Chào mừng bạn đến với Intlayer v9! Bản phát hành lớn này đánh dấu một cột mốc quan trọng trong việc đơn giản hóa lộ trình migration sang Intlayer với các **Compat Adapter Packages** dành cho các thư viện i18n phổ biến (`react-i18next`, `next-intl`, `vue-i18n`, v.v.) và bổ sung hỗ trợ cho các cấu trúc nội dung phong phú: **Collections**, **Variants**, và **Dynamic Records**.
+
+## Mục lục
+
+<TOC levels={[2]} maxDepth={1} />
+
+---
+
+## Compat Adapter Packages
+
+Việc migration sang Intlayer từ các thư viện i18n phổ biến giờ đây dễ dàng hơn bao giờ hết. Chúng tôi đã tạo ra năm compat package cung cấp **chính xác các public API tương tự** như các thư viện i18n tiêu chuẩn nhưng ủy quyền toàn bộ việc xử lý translation cho Intlayer tại runtime.
+
+### Cung cấp cùng một Public API với Strict Typing
+
+Bằng cách thay thế các import, bạn sẽ nhận được tất cả các lợi ích của Intlayer (bao gồm cả compile-time type safety dựa trên các dictionary thực tế của bạn) với những thay đổi code tối thiểu:
+
+- `@intlayer/i18next`
+- `@intlayer/react-i18next`
+- `@intlayer/next-intl`
+- `@intlayer/next-i18next`
+- `@intlayer/vue-i18n`
+
+Ví dụ, chỉ cần thay đổi:
+
+```ts
+import { useTranslation } from "react-i18next";
+```
+
+thành:
+
+```ts
+import { useTranslation } from "@intlayer/react-i18next";
+```
+
+Các key của bạn giờ đây sẽ được **strictly typed** dựa trên các Intlayer dictionary của bạn, mang lại khả năng auto-completion dot-path đầy đủ trong IDE của bạn!
+
+### Bundler Alias Plugins (Vite, Next.js, Turbopack)
+
+Để cho phép migration mà không cần phải viết lại tất cả các câu lệnh import một cách thủ công, mỗi compat adapter package đều đi kèm một **custom bundler plugin** (Vite hoặc Next.js) dưới subpath `/plugin`.
+
+Các plugin này tự động rewrite các import hiện có (ví dụ: `react-i18next` hoặc `next-intl`) thành các package tương đương `@intlayer/*` tại build time.
+
+#### Ví dụ Next.js (Webpack / Turbopack)
+
+Thay vì `withIntlayer`, hãy bọc cấu hình Next.js của bạn bằng compat plugin:
+
+```ts fileName="next.config.ts"
+import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";
+import type { NextConfig } from "next";
+
+const withIntlayer = createNextI18nPlugin();
+const nextConfig: NextConfig = {};
+
+export default withIntlayer(nextConfig);
+```
+
+#### Ví dụ Vite (React, Vue, Solid, Svelte)
+
+```ts fileName="vite.config.ts"
+import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";
+
+export default defineConfig({
+  plugins: [vueI18nVitePlugin()],
+});
+```
+
+---
+
+## Mutualized Runtime Resolver
+
+Tất cả các compat adapter giờ đây đều định tuyến việc xử lý translation thông qua một runtime parser duy nhất và được tối ưu hóa cao: `@intlayer/core/messageFormat`.
+
+- **Interpolate Message**: Xử lý các cú pháp tiêu chuẩn `{{var}}` (whitespace & dot-paths), các đối số định dạng ICU (`{v, number, percent}` v.v.), và các template `{var}` cơ bản.
+- **Message Node Resolver**: Xử lý các node lồng nhau: `insert()`, `plural()` (quy tắc số nhiều CLDR), `enu()` (enumeration), `gender()`, các thẻ HTML, array, và các callable function node.
+- **Tokenized Tag Parser**: Hỗ trợ các thẻ XML/HTML inline và các thẻ được đánh số (ví dụ: `<1>children</1>`) để hỗ trợ render rich-text một cách dễ dàng.
+
+---
+
+## Chi tiết tính năng: Collections, Variants & Dynamic Records
+
+Intlayer v9 mở rộng vượt ra ngoài các đối tượng key-value tĩnh, cho phép các dictionary khai báo các cấu trúc layout động được định kiểu đầy đủ (fully typed) từ đầu đến cuối.
+
+### 1. Collections
+
+Định nghĩa một danh sách các item có thứ tự do CMS quản lý (ví dụ: FAQ, sản phẩm, hoặc danh sách blog):
+
+```ts fileName="faq.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "faq",
+  content: [
+    {
+      question: t({
+        vi: "Intlayer là gì?",
+        en: "What is Intlayer?",
+        fr: "Qu'est-ce qu'Intlayer ?",
+      }),
+      answer: t({
+        vi: "Một bộ công cụ i18n.",
+        en: "An i18n toolkit.",
+        fr: "Une boîte à outils i18n.",
+      }),
+    },
+  ],
+} satisfies Dictionary;
+```
+
+#### Cách sử dụng:
+
+```ts
+// Lấy tất cả các item
+const allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]
+
+// Lấy một item duy nhất bằng index
+const faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }
+```
+
+### 2. Variants
+
+Cung cấp các bản thử nghiệm A/B, seasonal header, feature flag, hoặc các landing page tùy chỉnh:
+
+```ts fileName="hero.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "hero-banner",
+  variant: "default",
+  content: {
+    control: t({ vi: "Chào mừng", en: "Welcome", fr: "Bienvenue" }),
+    black_friday: t({
+      vi: "Mua ngay",
+      en: "Shop now",
+      fr: "Acheter maintenant",
+    }),
+  },
+} satisfies Dictionary;
+```
+
+#### Cách sử dụng:
+
+```ts
+const banner = useIntlayer("hero-banner", { variant: "black_friday" });
+```
+
+### 3. Dynamic Records
+
+Định nghĩa các dictionary có các mục nhập được tải động tại runtime thông qua các query ID:
+
+```ts fileName="product.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "product-copy",
+  meta: {
+    id: "prod_123",
+    category: "books",
+  },
+  content: {
+    title: t({ vi: "Clean Code", en: "Clean Code", fr: "Code Propre" }),
+  },
+} satisfies Dictionary;
+```
+
+#### Cách sử dụng:
+
+```ts
+// Chỉ tải động item được yêu cầu (yêu cầu Suspense)
+const product = useIntlayer("product-copy", {
+  id: "prod_123",
+  category: "books",
+});
+```
+
+---
+
+## Tối ưu hóa Dynamic Loading & Bundle Size
+
+Để giữ cho các bundle cực kỳ nhỏ gọn, Intlayer v9 hỗ trợ dynamic lazy loading.
+
+Trong cấu hình của bạn, hãy đặt `importMode` thành `'dynamic'` hoặc `'fetch'`:
+
+```ts fileName="intlayer.config.ts"
+export default {
+  dictionary: {
+    importMode: "dynamic", // "static" | "dynamic" | "fetch"
+  },
+};
+```
+
+Tại build time, `@intlayer/swc` và `@intlayer/babel` sẽ quét các file của bạn và thay thế các lệnh gọi `useIntlayer` / `getIntlayer` bằng các wrapper có khả năng tree-shake (`useDictionary` / `useDictionaryDynamic`). Chỉ nội dung được yêu cầu cho collection item, variant, hoặc locale đã chọn mới được tải, giúp ngăn production bundle của bạn chứa các bản dịch không sử dụng.
+
+---
+
+## Lưu ý khi migration từ v8
+
+Nếu bạn đang nâng cấp từ v8, lưu ý rằng v9 không bao gồm các breaking change. Tuy nhiên, dưới đây là các thay đổi chính:
+
+- **Locales & Dialects**: Nếu sử dụng các dependency i18n bên ngoài, hãy thêm các compat adapter plugin tương ứng của chúng vào cấu hình hoặc thiết lập bundler của bạn để tự động rewrite các import.
+- **Custom Selectors**: Khi gọi `useIntlayer`, tham số thứ hai giờ đây được dành riêng cho một đối tượng option chứa `{ locale, item, variant, id }`. Nếu trước đây bạn đã truyền trực tiếp một chuỗi locale, bạn vẫn có thể làm như vậy, nhưng việc sử dụng đối tượng options được khuyến nghị cho các lựa chọn nâng cao.
+
+---
+
+## Liên kết hữu ích
+
+- [Hướng dẫn về Compat Adapter Packages](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/compat/index.md)
+- [Dynamic Dictionaries - Collections, Variants & Dynamic Records](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dynamic_dictionaries/index.md)
+- [Tài liệu tham khảo cấu hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md)