@intlayer/docs 9.1.3 → 9.2.0

package/docs/vi/analytics.md

@@ -0,0 +1,222 @@
+---
+createdAt: 2026-07-08
+updatedAt: 2026-07-08
+title: Intlayer Analytics | Theo dõi hiển thị nội dung và chạy thử nghiệm A/B
+description: Khám phá cách @intlayer/analytics theo dõi lượt xem trang/ngôn ngữ và lượt hiển thị nội dung, cũng như cách sử dụng nó để chạy thử nghiệm A/B trên nội dung Intlayer của bạn.
+keywords:
+  - Analytics
+  - A/B Testing
+  - Audience
+  - Internationalization
+  - Documentation
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - analytics
+history:
+  - version: 9.0.0
+    date: 2026-07-08
+    changes: "Init doc — gói @intlayer/analytics, theo dõi ở cấp độ provider/node, thử nghiệm A/B, dashboard"
+author: aymericzip
+---
+
+# Tài liệu Intlayer Analytics
+
+`@intlayer/analytics` là một gói đồng hành tùy chọn cho bạn biết **chính xác nội dung nào được hiển thị** cho khách truy cập của bạn — trang nào, bằng ngôn ngữ (locale) nào và đoạn nội dung được dịch cụ thể nào — để bạn có thể hiểu rõ khán giả của mình và chạy **thử nghiệm A/B trên nội dung**.
+
+## Mục lục
+
+<TOC/>
+
+---
+
+## Những gì nó theo dõi
+
+`@intlayer/analytics` gom nhóm ba loại sự kiện ẩn danh thành các batch:
+
+| Sự kiện            | Bắt ở đâu                                            | Cho bạn biết điều gì                                                                                                                                              |
+| ------------------ | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `page_view`        | Cấp độ Provider (`IntlayerProvider`)                 | Trang và ngôn ngữ nào mà một phiên (session) đã xem, khi tải lần đầu, khi chuyển hướng (route change) hoặc chuyển ngôn ngữ.                                       |
+| `content_exposure` | Cấp độ Node (`useIntlayer` / plugin trình biên dịch) | Khóa từ điển (dictionary key) / đường dẫn khóa nào thực sự được giải quyết và hiển thị — và nếu là một phần của thử nghiệm, thì đó là **biến thể (variant)** nào. |
+| `conversion`       | Bất cứ nơi nào bạn gọi `useConversion()`             | Một mục tiêu đạt được (đăng ký, nhấp chuột, mua hàng...) được quy cho (attributed) biến thể A/B mà phiên đó đã tiếp xúc.                                          |
+
+Các sự kiện được thu thập trong bộ nhớ và được gửi dưới dạng một **yêu cầu batch duy nhất khoảng 20 giây một lần** — không bao giờ gửi trên mỗi lần gõ phím hoặc mỗi lần render — do đó, analytics không bao giờ ảnh hưởng đến thời gian render đầu tiên hoặc thêm một yêu cầu cho mỗi tương tác.
+
+## Cách nó hỗ trợ thử nghiệm A/B trên nội dung
+
+Intlayer đã cho phép bạn khai báo [Biến thể (Variants)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dynamic_dictionaries/index.md) nội dung (ví dụ: từ điển `hero-banner` có biến thể `control` và `black_friday`). `@intlayer/analytics` khép kín quy trình này:
+
+1. `getVariant(experimentKey, variants)` gán một cách tất định mỗi phiên ẩn danh cho một biến thể — đây là một hàm thuần túy (pure function) của session id và khóa thử nghiệm, vì vậy việc gán là **ổn định trong toàn bộ phiên** và **không cần round-trip đến máy chủ** trước lần render đầu tiên (không bị nhấp nháy (flicker), không thay đổi bố cục (layout shift)).
+2. Mỗi sự kiện `content_exposure` mang theo `variant` đã được hiển thị.
+3. `useConversion()` cho phép bạn quy một mục tiêu (ví dụ: `"cta_click"`) cho biến thể đó.
+4. Điểm cuối (endpoint) kết quả thử nghiệm trên dashboard sẽ so sánh tỷ lệ chuyển đổi trên mỗi biến thể, bao gồm cả ý nghĩa thống kê (kiểm định z).
+
+## Cài đặt
+
+`@intlayer/analytics` là một dependency **ngang hàng (peer), tùy chọn** — không bao giờ được tự động cài đặt bởi một gói framework. Hãy thêm nó cùng với `intlayer`:
+
+```bash packageManager="npm"
+npm install @intlayer/analytics
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/analytics
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/analytics
+```
+
+```bash packageManager="bun"
+bun add @intlayer/analytics
+```
+
+Nếu bạn không cài đặt nó, mọi điểm tích hợp (integration point) sẽ được coi là một hành động trống (no-op) — xem phần [Không tốn phí khi không được cài đặt](#khong-ton-phi-khi-khong-duoc-cai-dat) bên dưới.
+
+## Cấu hình
+
+Analytics **sử dụng lại khối cấu hình `editor` hiện có** — không có schema cấu hình `analytics` riêng biệt để điền vào:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  editor: {
+    backendURL: "https://back.intlayer.org", // Cũng được sử dụng làm điểm cuối nhận dữ liệu (ingestion endpoint) cho analytics
+    clientId: "your-client-id", // Cũng được sử dụng làm khóa dự án analytics
+    clientSecret: "your-client-secret",
+  },
+};
+
+export default config;
+```
+
+- `editor.backendURL` — URL cơ sở mà các sự kiện analytics được gửi đến (`POST {backendURL}/api/analytics/events`).
+- `editor.clientId` — khóa dự án công khai được gắn vào mọi sự kiện được thu nhận. Nó cũng đóng vai trò là **công tắc bật (enable switch)**: analytics hoàn toàn bị vô hiệu hóa (và được loại bỏ bằng tree-shaking, xem bên dưới) cho đến khi `clientId` được định cấu hình.
+
+Nếu bạn tự lưu trữ (self-host) Intlayer, analytics sẽ tự động trỏ đến phiên bản của riêng bạn vì nó dùng chung `editor.backendURL`.
+
+## Hỗ trợ Framework
+
+Analytics được liên kết với `IntlayerProvider` dùng chung từ `react-intlayer`, vì vậy nó có sẵn ở bất kỳ đâu provider đó được sử dụng:
+
+| Framework                                                | Trạng thái                                                                                            |
+| -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| React                                                    | ✅ Có sẵn                                                                                             |
+| Next.js (`next-intlayer`)                                | ✅ Có sẵn (thông qua `react-intlayer`)                                                                |
+| React Native / Expo (`react-native-intlayer`)            | ✅ Có sẵn (thông qua `react-intlayer`)                                                                |
+| Vue, Svelte, Angular, Solid, Preact, Lit, Astro, Vanilla | 🚧 Đã lên kế hoạch — cùng một client, các ràng buộc cấp provider tuân theo mô hình `@intlayer/editor` |
+
+## Cách sử dụng
+
+### Tự động theo dõi ở cấp độ provider
+
+Không cần thay đổi mã nguồn. Khi `@intlayer/analytics` đã được cài đặt và `editor.clientId` được cấu hình, `IntlayerProvider` sẽ tự động:
+
+- khởi tạo analytics client khi mount,
+- ghi lại một `page_view` ở lần tải ban đầu,
+- ghi lại một `page_view` mỗi khi thay đổi ngôn ngữ,
+- bắt đầu vòng lặp flush ~20 giây và flush mọi sự kiện còn lại khi unmount / đóng tab (thông qua `navigator.sendBeacon`, với fallback là `fetch(..., { keepalive: true })`).
+
+### Tự động theo dõi ở cấp độ node
+
+Mỗi khi `useIntlayer` phân giải một phần nội dung để hiển thị, trình thông dịch sẽ báo cáo một sự kiện `content_exposure` cho chính xác `dictionaryKey` + đường dẫn khóa + ngôn ngữ đó — một lần nữa, không cần thay đổi mã. Các lần hiển thị lặp lại của cùng một node trong cùng một cửa sổ flush sẽ được gộp lại thành một sự kiện duy nhất với thuộc tính `count`, vì vậy một danh sách hiển thị lại (re-render) 50 lần sẽ không gửi 50 sự kiện.
+
+### Theo dõi chuyển đổi cho thử nghiệm A/B
+
+Sử dụng `useConversion()` để quy một mục tiêu cho biến thể mà một phiên đã thấy:
+
+```tsx fileName="CTAButton.tsx" codeFormat="tsx"
+import { useConversion } from "react-intlayer";
+
+const CTAButton = () => {
+  const trackConversion = useConversion();
+
+  return (
+    <button
+      onClick={() =>
+        trackConversion({
+          experimentKey: "homepage-hero",
+          variant: "black_friday",
+          goal: "cta_click",
+        })
+      }
+    >
+      Bắt đầu
+    </button>
+  );
+};
+```
+
+### Phân giải biến thể phía client (client-side)
+
+```tsx fileName="useHeroVariant.ts" codeFormat="tsx"
+import { getGlobalAnalyticsClient } from "@intlayer/analytics/client";
+
+const client = getGlobalAnalyticsClient();
+const variant = client?.getVariant("homepage-hero", [
+  "control",
+  "black_friday",
+]);
+```
+
+## Quyền riêng tư & Hiệu suất
+
+- **Ẩn danh theo thiết kế (Anonymous by design)**: các phiên được xác định bằng một id xoay vòng (rotating id); máy chủ (backend) chỉ lưu trữ **mã băm SHA-256** của id đó — không bao giờ lưu trữ id thô và không bao giờ lưu trữ địa chỉ IP.
+- **Vị trí là tương đối**: chỉ có mã quốc gia, bắt nguồn từ các tiêu đề vị trí địa lý của CDN (ví dụ: `cf-ipcountry`, `x-vercel-ip-country`, ...) — không có IP nào được đọc hoặc lưu trữ.
+- **URL loại trừ tham số tìm kiếm (search params)** theo mặc định, do đó các chuỗi truy vấn (query strings) không bao giờ bị thu thập.
+- **Lấy mẫu (Sampling)**: `sampleRate` cho phép bạn chỉ giữ lại một phần nhỏ các sự kiện hiển thị nội dung trên các ứng dụng có lưu lượng truy cập cao.
+- **Xử lý theo batch**: một yêu cầu được gửi sau khoảng 20 giây (`flushInterval`), hoặc sớm hơn nếu bộ đệm bị đầy (`maxBufferSize`) — không bao giờ gửi một yêu cầu cho mỗi sự kiện.
+
+### Không tốn phí khi không được cài đặt
+
+`@intlayer/analytics` tuân theo chính xác cùng một mô hình tùy chọn-dependency như `@intlayer/editor`:
+
+- mọi điểm tích hợp đều tải gói này thông qua việc sử dụng **dynamic `import()` được bao bọc trong khối `try/catch`** — một ứng dụng không bao giờ cài đặt `@intlayer/analytics` sẽ không bao giờ bị tăng kích thước bundle hoặc chi phí thời gian chạy, và không bao giờ thấy lỗi;
+- một biến môi trường ở thời điểm biên dịch (`INTLAYER_ANALYTICS_ENABLED`), được đặt tự động thành `'false'` bởi `@intlayer/config` bất cứ khi nào `editor.clientId` không được định cấu hình, cho phép các bundler có thể **loại bỏ mã thừa (dead-code-eliminate)** toàn bộ tích hợp này;
+- analytics bị vô hiệu hóa bên trong iframe xem trước của trình chỉnh sửa / CMS Intlayer, do đó các phiên của trình chỉnh sửa không bao giờ được tính là lưu lượng truy cập thực.
+
+## Dashboard: Trang Analytics
+
+Sau khi dự án của bạn đã thu thập các sự kiện, trang **Analytics** trong [Intlayer dashboard](https://app.intlayer.org/analytics) (hiển thị ở thanh bên sau khi dự án được chọn) sẽ hiển thị:
+
+- **Người dùng đang hoạt động (Active users)** — số lượng khách truy cập duy nhất trong khoảng thời gian cuộn (rolling window) đã chọn (7 / 30 / 90 ngày).
+- **Người dùng hôm nay** và **người dùng trong 7 ngày qua**.
+- **Lượt xem trang (Page views)** trong khoảng thời gian đã chọn.
+- Một **biểu đồ diễn biến (evolution graph)** của số khách truy cập duy nhất hàng ngày.
+- Các tab phân tích theo **Ngôn ngữ (Locales)** và **Vị trí (Location)**, xếp hạng khán giả của bạn theo ngôn ngữ và quốc gia.
+
+## Tham khảo API Backend (Backend API reference)
+
+Tất cả các điểm cuối (endpoint) để đọc đều yêu cầu xác thực; việc thu thập dữ liệu (ingestion) là công khai và được quy cho thông qua thuộc tính `clientId` trong phần body.
+
+| Phương thức | Điểm cuối (Endpoint)                        | Mô tả                                                                                             |
+| ----------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| `POST`      | `/api/analytics/events`                     | Thu nhận một lô sự kiện (công khai, được gán bởi `clientId` trong body).                          |
+| `GET`       | `/api/analytics/overview`                   | Tổng số trang / ngôn ngữ cho dự án đã được xác thực.                                              |
+| `GET`       | `/api/analytics/audience?days=30`           | Khách truy cập duy nhất, lượt xem trang, chuỗi ngày, phân tích theo ngôn ngữ + quốc gia.          |
+| `GET`       | `/api/analytics/content-stats`              | Tổng số lượt hiển thị theo mỗi nội dung, được nhóm theo khóa từ điển / đường dẫn khóa / ngôn ngữ. |
+| `GET`       | `/api/analytics/experiments/:experimentKey` | Tỷ lệ chuyển đổi cho mỗi biến thể và ý nghĩa thống kê cho một thử nghiệm A/B.                     |
+
+Bạn cũng có thể gọi các API này theo chương trình thông qua [CMS SDK](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_CMS.md):
+
+```ts fileName="analytics.ts"
+import { createIntlayerCMS } from "@intlayer/api";
+import { analyticsEndpoint } from "@intlayer/api/analytics";
+
+const cms = createIntlayerCMS();
+
+const { data: audience } = await analyticsEndpoint(cms).getAudience(30);
+```
+
+## Các liên kết hữu ích
+
+- [Từ điển Động - Bộ sưu tập & Biến thể (Dynamic Dictionaries)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dynamic_dictionaries/index.md)
+- [Intlayer CMS - CMS SDK](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_CMS.md)
+- [Trình chỉnh sửa Trực quan Intlayer (Visual Editor)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_visual_editor.md)
+- [Tham khảo Cấu hình (Configuration Reference)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md)
+- [Hướng dẫn Tự lưu trữ (Self-Hosting Guide)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/self_hosting.md)

package/docs/vi/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-07-11
+updatedAt: 2026-08-06
 title: Cấu hình (Configuration)
 description: Tìm hiểu cách cấu hình Intlayer cho ứng dụng của bạn. Hiểu các cài đặt và tùy chọn khác nhau có sẵn để tùy chỉnh Intlayer theo nhu cầu của bạn.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 9.1.3
+    date: 2026-08-06
+    changes: "Chuyển `routing.enableProxy` thành ba trạng thái: không đặt (auto), `true`, `false`"
   - version: 9.0.0
     date: 2026-07-11
     changes: "Thêm cấu hình `analytics`"
@@ -235,6 +238,18 @@ const config: IntlayerConfig = {
      */
     mode: "prefix-no-default",
 
+    /**
+     * Bật proxy định tuyến locale của Intlayer (middleware).
+     * Xử lý phát hiện locale, chuyển hướng và ghi lại URL ở dev, preview và SSR.
+     * - không đặt (auto): máy chủ dev và preview giữ định tuyến theo URL bằng cách bỏ qua
+     *   locale lưu trong cookie và header. Tiền tố vẫn được phân giải, locale vẫn được lưu,
+     *   và phát hiện Accept-Language vẫn áp dụng. Ở production hoạt động như `true`.
+     * - true: hành vi đầy đủ trong mọi môi trường.
+     * - false: không định tuyến locale.
+     * Mặc định: undefined (auto)
+     */
+    enableProxy: undefined,
+
     /**
      * Nơi lưu trữ locale được người dùng chọn.
      * Tùy chọn: 'cookie', 'localStorage', 'sessionStorage', 'header' hoặc một mảng của chúng.
@@ -713,13 +728,14 @@ Tính năng phân tích hoàn toàn là tùy chọn tham gia (opt-in): không c
 
 Cài đặt kiểm soát hành vi routing, bao gồm cấu trúc URL, lưu trữ locale và quản lý middleware.
 
-| Trường     | Mô tả                                                                                                                                                                                                                    | Kiểu dữ liệu                                                                                                                                                                                                 | Mặc định               | Ví dụ                                                                                                                                                                                              | Nhận xét                                                                                                                                                                                                                                                                     |
-| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `mode`     | Chế độ cấu trúc URL cho việc quản lý locale.                                                                                                                                                                             | `'prefix-no-default'` &#124; <br/> `'prefix-all'` &#124; <br/> `'no-prefix'` &#124; <br/> `'search-params'`                                                                                                  | `'prefix-no-default'`  | `'prefix-no-default'`: `/dashboard` (en) hoặc `/fr/dashboard` (fr). `'prefix-all'`: `/en/dashboard` . `'no-prefix'`: locale được quản lý theo cách khác. `'search-params'`: `/dashboard?locale=fr` | Không ảnh hưởng đến quản lý cookie hoặc local storage.                                                                                                                                                                                                                       |
-| `storage`  | Cấu hình cho việc lưu trữ locale phía client.                                                                                                                                                                            | `false` &#124; <br/> `'cookie'` &#124; <br/> `'localStorage'` &#124; <br/> `'sessionStorage'` &#124; <br/> `'header'` &#124; <br/> `CookiesAttributes` &#124; <br/> `StorageAttributes` &#124; <br/> `Array` | `['cookie', 'header']` | `'localStorage'` <br/> `[{ type: 'cookie', name: 'custom-locale', secure: true }]`                                                                                                                 | Xem bảng tham số lưu trữ bên dưới.                                                                                                                                                                                                                                           |
-| `basePath` | Đường dẫn cơ sở cho các URL ứng dụng.                                                                                                                                                                                    | `string`                                                                                                                                                                                                     | `''`                   | `'/my-app'`                                                                                                                                                                                        | Nếu ứng dụng của bạn nằm tại `https://example.com/my-app`, basePath là `'/my-app'` và các URL trỏ tới `https://example.com/my-app/en` .                                                                                                                                      |
-| `rewrite`  | Các quy tắc rewrite URL tùy chỉnh để ghi đè chế độ routing mặc định cho các đường dẫn cụ thể. Hỗ trợ các tham số động `[param]`.                                                                                         | `Record<string, StrictModeLocaleMap<string>>`                                                                                                                                                                | `undefined`            | Xem Ví dụ bên dưới                                                                                                                                                                                 | • Quy tắc rewrite có độ ưu tiên cao hơn `mode`.<br/>• Hoạt động với Next.js và Vite.<br/>• `getLocalizedUrl()` tự động áp dụng các quy tắc phù hợp.<br/>• Xem [Rewrite URL tùy chỉnh](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/custom_url_rewrites.md). |
-| `domains`  | Ánh xạ các locale với tên máy chủ tên miền để routing dựa trên tên miền. Khi được thiết lập, URL cho một locale sẽ sử dụng tên miền đó làm cơ sở (URL tuyệt đối) và không có tiền tố locale nào được thêm vào đường dẫn. | `Partial<Record<Locale, string>>`                                                                                                                                                                            | `undefined`            | `{ zh: 'intlayer.zh', fr: 'intlayer.org' }`                                                                                                                                                        | • Giao thức mặc định là `https://` khi không được bao gồm trong tên máy chủ.<br/>• Bản thân tên miền xác định locale, vì vậy không có tiền tố `/zh/` nào được thêm vào.<br/>• `getLocalizedUrl('/', 'zh')` trả về `https://intlayer.zh/`.                                    |
+| Trường        | Mô tả                                                                                                                                                                                                                    | Kiểu dữ liệu                                                                                                                                                                                                 | Mặc định               | Ví dụ                                                                                                                                                                                              | Nhận xét                                                                                                                                                                                                                                                                                                                                                          |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `mode`        | Chế độ cấu trúc URL cho việc quản lý locale.                                                                                                                                                                             | `'prefix-no-default'` &#124; <br/> `'prefix-all'` &#124; <br/> `'no-prefix'` &#124; <br/> `'search-params'`                                                                                                  | `'prefix-no-default'`  | `'prefix-no-default'`: `/dashboard` (en) hoặc `/fr/dashboard` (fr). `'prefix-all'`: `/en/dashboard` . `'no-prefix'`: locale được quản lý theo cách khác. `'search-params'`: `/dashboard?locale=fr` | Không ảnh hưởng đến quản lý cookie hoặc local storage.                                                                                                                                                                                                                                                                                                            |
+| `enableProxy` | Bật proxy định tuyến locale của Intlayer (middleware).                                                                                                                                                                   | `boolean` &#124; <br/> `undefined`                                                                                                                                                                           | `undefined` (auto)     | `true`                                                                                                                                                                                             | • Không đặt (auto): máy chủ dev và preview bỏ qua locale lưu trong cookie/header làm nguồn chuyển hướng; tiền tố, việc lưu locale và phát hiện `Accept-Language` vẫn áp dụng. Ở production hoạt động như `true`.<br/>• `true`: hành vi đầy đủ ở mọi nơi.<br/>• `false`: không định tuyến locale. Trên Next.js, middleware `intlayerProxy` trở thành pass-through. |
+| `storage`     | Cấu hình cho việc lưu trữ locale phía client.                                                                                                                                                                            | `false` &#124; <br/> `'cookie'` &#124; <br/> `'localStorage'` &#124; <br/> `'sessionStorage'` &#124; <br/> `'header'` &#124; <br/> `CookiesAttributes` &#124; <br/> `StorageAttributes` &#124; <br/> `Array` | `['cookie', 'header']` | `'localStorage'` <br/> `[{ type: 'cookie', name: 'custom-locale', secure: true }]`                                                                                                                 | Xem bảng tham số lưu trữ bên dưới.                                                                                                                                                                                                                                                                                                                                |
+| `basePath`    | Đường dẫn cơ sở cho các URL ứng dụng.                                                                                                                                                                                    | `string`                                                                                                                                                                                                     | `''`                   | `'/my-app'`                                                                                                                                                                                        | Nếu ứng dụng của bạn nằm tại `https://example.com/my-app`, basePath là `'/my-app'` và các URL trỏ tới `https://example.com/my-app/en` .                                                                                                                                                                                                                           |
+| `rewrite`     | Các quy tắc rewrite URL tùy chỉnh để ghi đè chế độ routing mặc định cho các đường dẫn cụ thể. Hỗ trợ các tham số động `[param]`.                                                                                         | `Record<string, StrictModeLocaleMap<string>>`                                                                                                                                                                | `undefined`            | Xem Ví dụ bên dưới                                                                                                                                                                                 | • Quy tắc rewrite có độ ưu tiên cao hơn `mode`.<br/>• Hoạt động với Next.js và Vite.<br/>• `getLocalizedUrl()` tự động áp dụng các quy tắc phù hợp.<br/>• Xem [Rewrite URL tùy chỉnh](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/custom_url_rewrites.md).                                                                                      |
+| `domains`     | Ánh xạ các locale với tên máy chủ tên miền để routing dựa trên tên miền. Khi được thiết lập, URL cho một locale sẽ sử dụng tên miền đó làm cơ sở (URL tuyệt đối) và không có tiền tố locale nào được thêm vào đường dẫn. | `Partial<Record<Locale, string>>`                                                                                                                                                                            | `undefined`            | `{ zh: 'intlayer.zh', fr: 'intlayer.org' }`                                                                                                                                                        | • Giao thức mặc định là `https://` khi không được bao gồm trong tên máy chủ.<br/>• Bản thân tên miền xác định locale, vì vậy không có tiền tố `/zh/` nào được thêm vào.<br/>• `getLocalizedUrl('/', 'zh')` trả về `https://intlayer.zh/`.                                                                                                                         |
 
 **Ví dụ về `rewrite`**:
 

package/docs/vi/dictionary/nesting.md

@@ -68,199 +68,52 @@ export default firstDictionary;
 }
 ```
 
-## Thiết lập lồng nội dung
+### Tham chiếu với Nest
 
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To use nested content in a React component, leverage the `useIntlayer` hook from the `react-intlayer` package. This hook retrieves the correct content based on the specified key. Here's an example of how to use it:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const NestComponent: FC = () => {
-  const { fullNestedContent, partialNestedContent } = useIntlayer(
-    "key_of_my_second_dictionary"
-  );
-
-  return (
-    <div>
-      <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
-      <p>Partial Nested Value: {partialNestedContent}</p>
-    </div>
-  );
-};
-
-export default NestComponent;
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
-To use nested content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
-
-const NestComponent: FC = () => {
-  const { fullNestedContent, partialNestedContent } = useIntlayer(
-    "key_of_my_second_dictionary"
-  );
-
-  return (
-    <div>
-      <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
-      <p>Partial Nested Value: {partialNestedContent}</p>
-    </div>
-  );
-};
-
-export default NestComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To use nested content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```vue fileName="**/*.vue"
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-const { fullNestedContent, partialNestedContent } = useIntlayer(
-  "key_of_my_second_dictionary"
-);
-</script>
-
-<template>
-  <div>
-    <p>Full Nested Content: {{ JSON.stringify(fullNestedContent) }}</p>
-    <p>Partial Nested Value: {{ partialNestedContent }}</p>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To use nested content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
-
-```svelte fileName="**/*.svelte"
-<script lang="ts">
-import { useIntlayer } from "svelte-intlayer";
-
-const content = useIntlayer("key_of_my_second_dictionary");
-</script>
-
-<div>
-  <p>Full Nested Content: {JSON.stringify($content.fullNestedContent)}</p>
-  <p>Partial Nested Value: {$content.partialNestedContent}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To use nested content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
+Bây giờ, hãy tạo một module nội dung khác sử dụng hàm `nest` để tham chiếu nội dung ở trên. Bạn có thể tham chiếu toàn bộ nội dung hoặc một giá trị lồng nhau cụ thể:
 
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
-
-const NestComponent: FC = () => {
-  const { fullNestedContent, partialNestedContent } = useIntlayer(
-    "key_of_my_second_dictionary"
-  );
-
-  return (
-    <div>
-      <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
-      <p>Partial Nested Value: {partialNestedContent}</p>
-    </div>
-  );
-};
-
-export default NestComponent;
-```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-To use nested content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { Component } from "solid-js";
-import { useIntlayer } from "solid-intlayer";
-
-const NestComponent: Component = () => {
-  const { fullNestedContent, partialNestedContent } = useIntlayer(
-    "key_of_my_second_dictionary"
-  );
-
-  return (
-    <div>
-      <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
-      <p>Partial Nested Value: {partialNestedContent}</p>
-    </div>
-  );
-};
-
-export default NestComponent;
-```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To use nested content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
+```typescript fileName="secondDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { nest, type Dictionary } from "intlayer";
 
-```typescript fileName="app.component.ts" codeFormat="typescript"
-import { Component } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
+const myNestingContent = {
+  key: "key_of_my_second_dictionary",
+  content: {
+    // Tham chiếu toàn bộ từ điển:
+    fullNestedContent: nest("key_of_my_first_dictionary"),
+    // Tham chiếu một giá trị lồng nhau cụ thể:
+    partialNestedContent: nest(
+      "key_of_my_first_dictionary",
+      "subContent.contentNumber"
+    ),
+  },
+} satisfies Dictionary;
 
-@Component({
-  selector: "app-nest",
-  template: `
-    <div>
-      <p>
-        Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}
-      </p>
-      <p>Partial Nested Value: {{ content().partialNestedContent }}</p>
-    </div>
-  `,
-})
-export class NestComponent {
-  content = useIntlayer("key_of_my_second_dictionary");
-  JSON = JSON;
-}
+export default myNestingContent;
 ```
 
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use nested content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("key_of_my_second_dictionary").onChange(
-  (newContent) => {
-    document.getElementById("nested")!.textContent =
-      newContent.partialNestedContent;
+```json fileName="secondDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_second_dictionary",
+  "content": {
+    "fullNestedContent": {
+      "nodeType": "nested",
+      "nested": {
+        "dictionaryKey": "key_of_my_first_dictionary"
+      }
+    },
+    "partialNestedContent": {
+      "nodeType": "nested",
+      "nested": {
+        "dictionaryKey": "key_of_my_first_dictionary",
+        "path": "subContent.contentNumber"
+      }
+    }
   }
-);
-
-// Initial render
-document.getElementById("nested")!.textContent = content.partialNestedContent;
+}
 ```
 
-  </Tab>
-</Tabs>
+Làm tham số thứ hai, bạn có thể chỉ định một đường dẫn tới một giá trị lồng nhau trong nội dung đó. Khi không cung cấp đường dẫn, toàn bộ nội dung của từ điển được tham chiếu sẽ được trả về.
 
 ## Sử dụng Nesting với React Intlayer