@intlayer/docs 9.4.1 → 9.4.3

package/docs/vi/bundle_optimization.md

@@ -43,139 +43,6 @@ Ví dụ, một ứng dụng có 10 trang được dịch ra 10 ngôn ngữ có
 
 <TOC />
 
-## Phân tích bundle của bạn
-
-Việc phân tích bundle là bước đầu tiên để xác định các file JSON "nặng" và phát hiện các cơ hội để code-splitting (chia nhỏ code). Những công cụ phân tích sẽ tạo ra một sơ đồ treemap trực quan từ mã đã compile của ứng dụng, cho phép bạn thấy được chính xác thư viện nào đang chiếm nhiều không gian nhất.
-
-<Tabs>
- <Tab value="vite">
-
-### Vite / Rollup
-
-Vite sử dụng Rollup phía bên dưới. Plugin `rollup-plugin-visualizer` sẽ tạo ra một file HTML tương tác, hiển thị trực quan dung lượng của mỗi module trong biểu đồ phụ thuộc của bạn.
-
-```bash
-npm install -D rollup-plugin-visualizer
-```
-
-```typescript fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { visualizer } from "rollup-plugin-visualizer";
-
-export default defineConfig({
-  plugins: [
-    visualizer({
-      open: true, // Tự động mở báo cáo trong trình duyệt
-      filename: "stats.html",
-      gzipSize: true,
-      brotliSize: true,
-    }),
-  ],
-});
-```
-
- </Tab>
- <Tab value="nextjs (turbopack)">
-
-### Next.js (Turbopack)
-
-Với các dự án dùng App Router và Turbopack, Next.js cung cấp một bộ phân tích thực nghiệm được tích hợp sẵn mà không cần bạn phải thêm package mở rộng.
-
-```bash packageManager='npm'
-npx next experimental-analyze
-```
-
-```bash packageManager='yarn'
-yarn next experimental-analyze
-```
-
-```bash packageManager='pnpm'
-pnpm next experimental-analyze
-```
-
-```bash packageManager='bun'
-bun next experimental-analyze
-```
-
- </Tab>
- <Tab value="nextjs (Webpack)">
-
-### Next.js (Webpack)
-
-Nếu bạn đang sử dụng trình bundle Webpack mặc định trong Next.js, hãy dùng bundle analyzer chính thức. Bạn có thể kích hoạt bằng cách đặt một biến môi trường trong quá trình build.
-
-```bash packageManager='npm'
-npm install -D @next/bundle-analyzer
-```
-
-```bash packageManager='yarn'
-yarn add -D @next/bundle-analyzer
-```
-
-```bash packageManager='pnpm'
-pnpm add -D @next/bundle-analyzer
-```
-
-```bash packageManager='bun'
-bun add -d @next/bundle-analyzer
-```
-
-```javascript fileName="next.config.js"
-const withBundleAnalyzer = require("@next/bundle-analyzer")({
-  enabled: process.env.ANALYZE === "true",
-});
-
-module.exports = withBundleAnalyzer({
-  // Cấu hình Next.js của bạn
-});
-```
-
-**Cách dùng:**
-
-```bash
-ANALYZE=true npm run build
-```
-
- </Tab>
- <Tab value="Webpack (CRA / Angular / etc)">
-
-### Webpack Tiêu Chuẩn
-
-Đối với Create React App (ejected), Angular, hoặc thiết lập Webpack tùy biến, hãy dùng công cụ quen thuộc trong ngành là `webpack-bundle-analyzer`.
-
-```bash packageManager='npm'
-npm install -D webpack-bundle-analyzer
-```
-
-```bash packageManager='yarn'
-yarn add -D webpack-bundle-analyzer
-```
-
-```bash packageManager='pnpm'
-pnpm add -D webpack-bundle-analyzer
-```
-
-```bash packageManager='bun'
-bun add -d webpack-bundle-analyzer
-```
-
-```typescript fileName="webpack.config.ts"
-import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
-
-export default {
-  plugins: [
-    new BundleAnalyzerPlugin({
-      analyzerMode: "static",
-      reportFilename: "bundle-analyzer.html",
-      openAnalyzer: false,
-    }),
-  ],
-};
-```
-
- </Tab>
-</Tabs>
-
 ## Nó hoạt động như thế nào
 
 Intlayer tiếp cận theo hướng **mỗi component riêng biệt (per-component)**. Khác với các file JSON toàn cục (global), nội dung được xác định song song bên cạnh hoặc bên trong chính các component. Trong quá trình build, Intlayer sẽ:
@@ -189,59 +56,6 @@ Cách tiếp cận này đảm bảo rằng:
 - Nếu một component không được import, nội dung của nó cũng không được đưa vào bundle (Kỹ thuật Dead Code Elimination).
 - Nếu một component được tải lazy-load, nội dung của nó cũng sẽ được tự động lazy-load theo.
 
-## Thông tin chi tiết về các Plugin
-
-Trình tối ưu hóa build của Intlayer được chia làm nhiều plugin riêng biệt, mỗi cái đảm nhận duy nhất một công việc cụ thể. Việc hiểu những gì từng plugin thực hiện sẽ giúp bạn tránh nhầm lẫn khi tùy chỉnh cấu hình.
-
-### Các plugin của Babel (`@intlayer/babel`)
-
-Những plugin này được khai báo trực tiếp vào `babel.config.js` ở các dự án phụ thuộc cấu hình Webpack (như Next.js dùng Babel, CRA, hoặc Webpack tùy chỉnh v.v.).
-
-Bảng dưới đây liệt kê chúng theo đúng thứ tự pipeline (cùng thứ tự mà chúng phải xuất hiện trong `babel.config.js`):
-
-| Plugin                        | Công dụng                                                                                                                                     |
-| :---------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------- |
-| `intlayerExtractBabelPlugin`  | Quét các file `.content.ts` và ghi nội dung từ điển đã biên dịch thành định dạng chuẩn vào thư mục `.intlayer/`                               |
-| `intlayerPurgeBabelPlugin`    | Quét toàn bộ mã nguồn, thực hiện loại bỏ (remove) **các trường nội dung không được sử dụng** ở file từ điển JSON tại `.intlayer/**/*.json`    |
-| `intlayerMinifyBabelPlugin`   | **Rút ngắn tên (rename) khóa (keys) của nội dung** thành ký tự ngắn rút gọn (vd: `title` đổi thành `a`) ở JSON cũng như bên trong Source Code |
-| `intlayerOptimizeBabelPlugin` | Viết lại `useIntlayer('key')` thành `useDictionary(hash)` và tự động inject thư viện `import` để nạp từ điển khớp tương ứng                   |
-
-> **Thứ tự sắp xếp của plugin là rất quan trọng.** Trong `babel.config.js` của bạn, các plugin purge và minify phải được đặt **trước** plugin optimize. Bước optimize thay thế `useIntlayer('key')` bằng một hàm gọi không minh bạch `useDictionary(hash)`, điều này có khả năng làm mất thông tin dictionary-key gốc - vốn là thông tin cần thiết để purge và minify có thể định danh các trường thuộc tính đang được ứng dụng.
-
-Mỗi plugin Babel sẽ đi kèm một helper option để đọc trực tiếp config của `intlayer.config.ts` một lần lúc load hệ thống, sau đó trả về giá trị đã được chuyển đổi:
-
-| Options helper               | Dùng cùng với                 |
-| :--------------------------- | :---------------------------- |
-| `getExtractPluginOptions()`  | `intlayerExtractBabelPlugin`  |
-| `getPurgePluginOptions()`    | `intlayerPurgeBabelPlugin`    |
-| `getMinifyPluginOptions()`   | `intlayerMinifyBabelPlugin`   |
-| `getOptimizePluginOptions()` | `intlayerOptimizeBabelPlugin` |
-
-### Các plugin của Vite (`vite-intlayer`)
-
-Những người dùng Vite **không bao giờ phải cấu hình cái này một cách thủ công**. Chúng tự động được thiết lập thông qua lệnh gọi `withIntlayer()` ở trong `vite.config.ts`. Những cấu hình dạng boolean (đúng/sai) như `build.purge` và `build.minify` ở `intlayer.config.ts` sẽ chuyển đổi các đặc tính tương ứng thông qua config này mà không phải cài đặt gì riêng biệt.
-
-| Plugin Vite ngầm định | Tương đương chức năng                                                                                                                              |
-| :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Usage analyzer        | Tương tự quy trình quét và tìm kiếm của `intlayerPurgeBabelPlugin`                                                                                 |
-| Dictionary prune      | Tương tự quy trình rút gọn và tối ưu bản ghi lưu của `intlayerPurgeBabelPlugin` qua JSON                                                           |
-| Dictionary minify     | Tương tự quy trình cắt giảm và rút ngắn độ dài JSON của `intlayerMinifyBabelPlugin` qua JSON                                                       |
-| Babel transform       | Tương tự quá trình viết lại tên khóa (key rename) bên nguồn code của `intlayerMinifyBabelPlugin` + thay phiên mã của `intlayerOptimizeBabelPlugin` |
-
-### Plugin SWC (`@intlayer/swc`)
-
-Người dùng Next.js cũng **không bao giờ cấu hình những thứ này trực tiếp**. Từ **v9.2.1**, `withIntlayer()` trong `next.config.ts` chạy toàn bộ pipeline — purge, minify và viết lại import — chỉ dựa trên hai cờ `build.purge` và `build.minify`.
-
-Công việc được chia làm hai, vì một plugin Wasm của SWC chỉ biến đổi một tệp tại một thời điểm và không có quyền truy cập hệ thống tệp:
-
-| Lượt xử lý                                 | Chạy ở đâu                       | Làm gì                                                                                   |
-| :----------------------------------------- | :------------------------------- | :--------------------------------------------------------------------------------------- |
-| Phân tích sử dụng + purge/minify JSON      | Node, bên trong `withIntlayer()` | Đọc mọi tệp nguồn của component, viết lại `.intlayer/**/*.json`, tạo ra các bảng đổi tên |
-| Viết lại mã nguồn (`content.title` → `.a`) | `@intlayer/swc` (Wasm)           | Áp dụng các bảng đổi tên cho những truy cập thuộc tính tương ứng trong mã của bạn        |
-| Viết lại import (`useIntlayer` → dict)     | `@intlayer/swc` (Wasm)           | Giống `intlayerOptimizeBabelPlugin`                                                      |
-
-Việc xác định _những_ trường nào không được dùng và mỗi trường nhận _bí danh_ nào đòi hỏi trạng thái xuyên tệp và I/O tệp, nên nửa đó chạy trong Node; plugin SWC chỉ nhận các bảng kết quả.
-
 ## Tùy chỉnh thiết lập dựa vào Platform (nền tảng)
 
 <Tabs>
@@ -405,6 +219,59 @@ module.exports = {
  </Tab>
 </Tabs>
 
+## Thông tin chi tiết về các Plugin
+
+Trình tối ưu hóa build của Intlayer được chia làm nhiều plugin riêng biệt, mỗi cái đảm nhận duy nhất một công việc cụ thể. Việc hiểu những gì từng plugin thực hiện sẽ giúp bạn tránh nhầm lẫn khi tùy chỉnh cấu hình.
+
+### Các plugin của Babel (`@intlayer/babel`)
+
+Những plugin này được khai báo trực tiếp vào `babel.config.js` ở các dự án phụ thuộc cấu hình Webpack (như Next.js dùng Babel, CRA, hoặc Webpack tùy chỉnh v.v.).
+
+Bảng dưới đây liệt kê chúng theo đúng thứ tự pipeline (cùng thứ tự mà chúng phải xuất hiện trong `babel.config.js`):
+
+| Plugin                        | Công dụng                                                                                                                                     |
+| :---------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------- |
+| `intlayerExtractBabelPlugin`  | Quét các file `.content.ts` và ghi nội dung từ điển đã biên dịch thành định dạng chuẩn vào thư mục `.intlayer/`                               |
+| `intlayerPurgeBabelPlugin`    | Quét toàn bộ mã nguồn, thực hiện loại bỏ (remove) **các trường nội dung không được sử dụng** ở file từ điển JSON tại `.intlayer/**/*.json`    |
+| `intlayerMinifyBabelPlugin`   | **Rút ngắn tên (rename) khóa (keys) của nội dung** thành ký tự ngắn rút gọn (vd: `title` đổi thành `a`) ở JSON cũng như bên trong Source Code |
+| `intlayerOptimizeBabelPlugin` | Viết lại `useIntlayer('key')` thành `useDictionary(hash)` và tự động inject thư viện `import` để nạp từ điển khớp tương ứng                   |
+
+> **Thứ tự sắp xếp của plugin là rất quan trọng.** Trong `babel.config.js` của bạn, các plugin purge và minify phải được đặt **trước** plugin optimize. Bước optimize thay thế `useIntlayer('key')` bằng một hàm gọi không minh bạch `useDictionary(hash)`, điều này có khả năng làm mất thông tin dictionary-key gốc - vốn là thông tin cần thiết để purge và minify có thể định danh các trường thuộc tính đang được ứng dụng.
+
+Mỗi plugin Babel sẽ đi kèm một helper option để đọc trực tiếp config của `intlayer.config.ts` một lần lúc load hệ thống, sau đó trả về giá trị đã được chuyển đổi:
+
+| Options helper               | Dùng cùng với                 |
+| :--------------------------- | :---------------------------- |
+| `getExtractPluginOptions()`  | `intlayerExtractBabelPlugin`  |
+| `getPurgePluginOptions()`    | `intlayerPurgeBabelPlugin`    |
+| `getMinifyPluginOptions()`   | `intlayerMinifyBabelPlugin`   |
+| `getOptimizePluginOptions()` | `intlayerOptimizeBabelPlugin` |
+
+### Các plugin của Vite (`vite-intlayer`)
+
+Những người dùng Vite **không bao giờ phải cấu hình cái này một cách thủ công**. Chúng tự động được thiết lập thông qua lệnh gọi `withIntlayer()` ở trong `vite.config.ts`. Những cấu hình dạng boolean (đúng/sai) như `build.purge` và `build.minify` ở `intlayer.config.ts` sẽ chuyển đổi các đặc tính tương ứng thông qua config này mà không phải cài đặt gì riêng biệt.
+
+| Plugin Vite ngầm định | Tương đương chức năng                                                                                                                              |
+| :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Usage analyzer        | Tương tự quy trình quét và tìm kiếm của `intlayerPurgeBabelPlugin`                                                                                 |
+| Dictionary prune      | Tương tự quy trình rút gọn và tối ưu bản ghi lưu của `intlayerPurgeBabelPlugin` qua JSON                                                           |
+| Dictionary minify     | Tương tự quy trình cắt giảm và rút ngắn độ dài JSON của `intlayerMinifyBabelPlugin` qua JSON                                                       |
+| Babel transform       | Tương tự quá trình viết lại tên khóa (key rename) bên nguồn code của `intlayerMinifyBabelPlugin` + thay phiên mã của `intlayerOptimizeBabelPlugin` |
+
+### Plugin SWC (`@intlayer/swc`)
+
+Người dùng Next.js cũng **không bao giờ cấu hình những thứ này trực tiếp**. Từ **v9.2.1**, `withIntlayer()` trong `next.config.ts` chạy toàn bộ pipeline — purge, minify và viết lại import — chỉ dựa trên hai cờ `build.purge` và `build.minify`.
+
+Công việc được chia làm hai, vì một plugin Wasm của SWC chỉ biến đổi một tệp tại một thời điểm và không có quyền truy cập hệ thống tệp:
+
+| Lượt xử lý                                 | Chạy ở đâu                       | Làm gì                                                                                   |
+| :----------------------------------------- | :------------------------------- | :--------------------------------------------------------------------------------------- |
+| Phân tích sử dụng + purge/minify JSON      | Node, bên trong `withIntlayer()` | Đọc mọi tệp nguồn của component, viết lại `.intlayer/**/*.json`, tạo ra các bảng đổi tên |
+| Viết lại mã nguồn (`content.title` → `.a`) | `@intlayer/swc` (Wasm)           | Áp dụng các bảng đổi tên cho những truy cập thuộc tính tương ứng trong mã của bạn        |
+| Viết lại import (`useIntlayer` → dict)     | `@intlayer/swc` (Wasm)           | Giống `intlayerOptimizeBabelPlugin`                                                      |
+
+Việc xác định _những_ trường nào không được dùng và mỗi trường nhận _bí danh_ nào đòi hỏi trạng thái xuyên tệp và I/O tệp, nên nửa đó chạy trong Node; plugin SWC chỉ nhận các bảng kết quả.
+
 ## Tùy chỉnh cấu hình (Configuration)
 
 Để cung cấp sức mạnh điều khiển tối đa xem cách thức Intlayer quản trị hiệu suất ứng dụng của bạn ra sao, vui lòng điều phối ngay bên trong tham số biến `build` của file `intlayer.config.ts`.
@@ -650,3 +517,136 @@ const content = useDictionaryAsync({
 | **Vấn Đề Đòi Request Băng Thông Trên Đường Mạng**                                | Bằng 0 Hoàn Toàn                                                                   | Phát Hành Chuẩn Cú 1 Request Cho Duy Nhất 1 Bảng Key Component Dictionary                   |
 | **Bảo Vệ Tính An Toàn Loại Rác Thừa Qua Việc Tree Shaking**                      | Theo Khu Vực Thuộc Về Component                                                    | Tính Linh Động Nhờ Chạy Khép Component + Khép Riêng Mức Locale Do Yêu Cầu Tùy Loại Ngôn Ngữ |
 | **Xài Chuẩn Không Chỉnh Ở Tính Chất Cho Đạt Case Xịn Khỏi Chê**                  | Thể Loại Cấu Trúc Thành Phần Giao Diện Nhanh Lẹ Cho Phép Chạy Web Trọng Lượng Thấp | Ở Lãnh Thổ Website Sỡ Hữu Mớ Tài Liệu Quá Dài Có Nhiều Nút Đa Dịch Có Số Lượng Kếch Xù      |
+
+## Phân tích bundle của bạn
+
+Việc phân tích bundle là cách trực tiếp nhất để xác định các file JSON "nặng" và phát hiện các cơ hội để code-splitting (chia nhỏ code). Những công cụ phân tích sẽ tạo ra một sơ đồ treemap trực quan từ mã đã compile của ứng dụng, cho phép bạn thấy được chính xác thư viện nào đang chiếm nhiều không gian nhất.
+
+<Tabs>
+ <Tab value="vite">
+
+### Vite / Rollup
+
+Vite sử dụng Rollup phía bên dưới. Plugin `rollup-plugin-visualizer` sẽ tạo ra một file HTML tương tác, hiển thị trực quan dung lượng của mỗi module trong biểu đồ phụ thuộc của bạn.
+
+```bash
+npm install -D rollup-plugin-visualizer
+```
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { visualizer } from "rollup-plugin-visualizer";
+
+export default defineConfig({
+  plugins: [
+    visualizer({
+      open: true, // Tự động mở báo cáo trong trình duyệt
+      filename: "stats.html",
+      gzipSize: true,
+      brotliSize: true,
+    }),
+  ],
+});
+```
+
+ </Tab>
+ <Tab value="nextjs (turbopack)">
+
+### Next.js (Turbopack)
+
+Với các dự án dùng App Router và Turbopack, Next.js cung cấp một bộ phân tích thực nghiệm được tích hợp sẵn mà không cần bạn phải thêm package mở rộng.
+
+```bash packageManager='npm'
+npx next experimental-analyze
+```
+
+```bash packageManager='yarn'
+yarn next experimental-analyze
+```
+
+```bash packageManager='pnpm'
+pnpm next experimental-analyze
+```
+
+```bash packageManager='bun'
+bun next experimental-analyze
+```
+
+ </Tab>
+ <Tab value="nextjs (Webpack)">
+
+### Next.js (Webpack)
+
+Nếu bạn đang sử dụng trình bundle Webpack mặc định trong Next.js, hãy dùng bundle analyzer chính thức. Bạn có thể kích hoạt bằng cách đặt một biến môi trường trong quá trình build.
+
+```bash packageManager='npm'
+npm install -D @next/bundle-analyzer
+```
+
+```bash packageManager='yarn'
+yarn add -D @next/bundle-analyzer
+```
+
+```bash packageManager='pnpm'
+pnpm add -D @next/bundle-analyzer
+```
+
+```bash packageManager='bun'
+bun add -d @next/bundle-analyzer
+```
+
+```javascript fileName="next.config.js"
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
+
+module.exports = withBundleAnalyzer({
+  // Cấu hình Next.js của bạn
+});
+```
+
+**Cách dùng:**
+
+```bash
+ANALYZE=true npm run build
+```
+
+ </Tab>
+ <Tab value="Webpack (CRA / Angular / etc)">
+
+### Webpack Tiêu Chuẩn
+
+Đối với Create React App (ejected), Angular, hoặc thiết lập Webpack tùy biến, hãy dùng công cụ quen thuộc trong ngành là `webpack-bundle-analyzer`.
+
+```bash packageManager='npm'
+npm install -D webpack-bundle-analyzer
+```
+
+```bash packageManager='yarn'
+yarn add -D webpack-bundle-analyzer
+```
+
+```bash packageManager='pnpm'
+pnpm add -D webpack-bundle-analyzer
+```
+
+```bash packageManager='bun'
+bun add -d webpack-bundle-analyzer
+```
+
+```typescript fileName="webpack.config.ts"
+import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
+
+export default {
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: "static",
+      reportFilename: "bundle-analyzer.html",
+      openAnalyzer: false,
+    }),
+  ],
+};
+```
+
+ </Tab>
+</Tabs>

package/docs/vi/configuration.md

@@ -1119,3 +1119,101 @@ Trình kiểm soát trình biên dịch Intlayer, thu thập các bộ từ đi
 | Trường    | Mô tả                                      | Kiểu dữ liệu       |
 | --------- | ------------------------------------------ | ------------------ |
 | `plugins` | Danh sách các plugin Intlayer cần bao gồm. | `IntlayerPlugin[]` |
+
+## Các Câu Hỏi Thường Gặp
+
+<FAQ>
+
+<Question title="Tệp intlayer.config.ts nên đặt ở đâu?">
+
+Ở thư mục gốc dự án của bạn, cạnh `package.json`. Intlayer quét thư mục làm việc và các thư mục cha để tìm `intlayer.config.ts`, `intlayer.config.js`, `intlayer.config.mjs`, hoặc `intlayer.config.cjs`. Bạn cũng có thể chỉ định đường dẫn tùy chỉnh qua flag `--config` trong các lệnh CLI.
+
+</Question>
+
+<Question title="i18n làm tăng kích thước bundle của tôi bao nhiêu?">
+
+Ít hơn nhiều so with các cấu hình dựa trên namespace, vì trang không bao giờ tải catalog mà nó không hiển thị. Mã hiển thị trên server phân giải nội dung ngay trên server, và compiler tại thời điểm build thay thế các lệnh gọi `useIntlayer` bằng chính xác các mục từ điển mà component sử dụng, do đó các khóa và ngôn ngữ không sử dụng sẽ bị loại bỏ. [Từ điển động](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dynamic_dictionaries/index.md) chia phần còn lại theo từng locale. So với các giải pháp thông thường, Intlayer giảm kích thước bundle và trang tới 50%. Xem [tối ưu hóa bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/bundle_optimization.md) và [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/benchmark/index.md).
+
+</Question>
+
+<Question title="Tôi có thể di chuyển từ i18next, next-intl hoặc react-i18next mà không cần viết lại component không?">
+
+Có, theo hai cách. Bạn có thể di chuyển nội dung dần dần bằng [hướng dẫn di chuyển từ i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/migration_from_i18next_to_intlayer.md) hoặc [hướng dẫn di chuyển từ next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/migration_from_next-intl_to_intlayer.md). Hoặc bạn có thể giữ nguyên API hiện tại: [adapter tương thích](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/compat/index.md) cung cấp chính xác các API tương tự như `i18next`, `react-i18next`, `next-intl`, `next-i18next`, `react-intl`, `use-intl`, `vue-i18n` và `Lingui`, nhưng chạy trên các từ điển Intlayer, nhờ đó chỉ có các lệnh import thay đổi còn mã component vẫn giữ nguyên.
+
+</Question>
+
+<Question title="Tôi có thể giữ các tệp dịch JSON hiện có của mình không?">
+
+Có. Plugin [sync JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/plugins/sync-json.md) giữ cho các tệp `/messages/{locale}/{namespace}.json` của bạn là nguồn sự thật duy nhất và tạo các từ điển Intlayer từ chúng theo cả hai hướng. Plugin [sync PO](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/plugins/sync-po.md) làm điều tương tự cho các catalog gettext, và [các tệp theo locale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/per_locale_file.md) cho phép bạn chia nội dung theo ngôn ngữ thay vì nhóm các locale trong một tệp.
+
+</Question>
+
+<Question title="Tôi có phải di chuyển nội dung từng khóa một không?">
+
+Không. Chạy `npx intlayer extract` và Intlayer sẽ đọc các tệp nguồn của bạn, trích xuất các chuỗi dành cho người dùng và tạo tệp `.content` bên cạnh mỗi tệp, nhờ đó bạn xem lại diff thay vì sao chép chuỗi vào catalog thủ công. Xem [lệnh extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/extract.md).
+
+Đối với quy trình làm việc hoàn toàn tự động, [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/compiler.md) thực hiện việc tương tự trong quá trình build trên mã JSX, TSX, Vue và Svelte, tạo từ điển trên mỗi thay đổi mà không cần quản lý khóa thủ công.
+
+</Question>
+
+<Question title="Có những công cụ editor và AI agent nào có sẵn?">
+
+Năm công cụ, tất cả đều là tùy chọn:
+
+- **[VS Code extension](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/vs_code_extension.md)**: nhảy từ khóa `useIntlayer` đến tệp nội dung khai báo nó, trích xuất nội dung từ component, và chạy build, fill, test, push và pull từ command palette hoặc tab Intlayer.
+- **[LSP server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/lsp.md)**: trải nghiệm tương tự trong bất kỳ trình soạn thảo nào hỗ trợ LSP, với go to definition, xem trước giá trị bản dịch khi hover, tự động hoàn thành khóa, và cảnh báo khi khóa chưa được khai báo ở bất kỳ đâu. Hỗ trợ cả các lệnh gọi `i18next`, `react-i18next`, `next-intl` và `use-intl`.
+- **[MCP server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/mcp_server.md)**: cung cấp tài liệu và CLI Intlayer cho Cursor, VS Code, Claude Desktop, Claude Code và ChatGPT.
+- **[Agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/agent_skills.md)**: các kỹ năng chuyên biệt như `intlayer-config`, `intlayer-cli` và `intlayer-content`.
+- **[ESLint plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/eslint.md)**: quy tắc `no-raw-text` phát hiện các chuỗi chưa được bản địa hóa.
+
+</Question>
+
+<Question title="Làm cách nào để thêm ngôn ngữ mới vào ứng dụng của tôi?">
+
+Thêm mã locale vào mảng `internationalization.locales`, sau đó chạy `npx intlayer fill` để tự động dịch nội dung hiện có. Compiler sẽ bao gồm ngôn ngữ mới trong lần build tiếp theo.
+
+</Question>
+
+<Question title="Làm cách nào để xóa tiền tố locale khỏi URL?">
+
+Đặt `routing.mode`. Giá trị `"no-prefix"` xóa tiền tố cho tất cả ngôn ngữ, xác định locale qua cookie, tiêu đề hoặc tên miền. Giá trị `"prefix-no-default"` (mặc định) chỉ ẩn tiền tố cho ngôn ngữ chính.
+
+</Question>
+
+<Question title="Tôi có thể phục vụ mỗi ngôn ngữ từ tên miền riêng không?">
+
+Có. Tùy chọn `routing.domains` ánh xạ từng locale tới một hostname, ví dụ `{ vi: 'example.vn', en: 'example.com' }`. Việc phát hiện theo tên miền được ưu tiên hơn tiền tố đường dẫn, và `getMultilingualUrls` tạo URL đầy đủ cho `hreflang`.
+
+</Question>
+
+<Question title="Ngôn ngữ của người dùng được phát hiện như thế nào?">
+
+Thông qua `routing.storage`, liệt kê các nguồn theo thứ tự ưu tiên: thường là URL trước, sau đó là cookie, tiếp theo là tiêu đề `Accept-Language`, và trở về ngôn ngữ mặc định nếu không tìm thấy.
+
+</Question>
+
+<Question title="routing.enableProxy làm nhiệm vụ gì?">
+
+Kiểm soát proxy định tuyến locale, middleware xử lý tiền tố và chuyển hướng. Mặc định proxy hoạt động ở chế độ dev và production. Đặt thành `false` nếu bạn tự quản lý đường dẫn.
+
+</Question>
+
+<Question title="Sự khác biệt giữa importMode static, dynamic và fetch là gì?">
+
+`"static"` (mặc định) import từ điển tĩnh để chúng được đóng gói và đọc đồng bộ. `"dynamic"` tải từ điển bất đồng bộ theo từng ngôn ngữ để giảm kích thước bundle ban đầu. `"fetch"` lấy từ điển từ server hoặc CMS tại thời điểm runtime.
+
+</Question>
+
+<Question title="Tôi thiết lập AI provider và API key cho việc dịch tự động ở đâu?">
+
+Trong tệp cấu hình tại phần `ai` hoặc trên dòng lệnh bằng các flag `--provider`, `--model`, và `--api-key`. Khóa API nằm ở môi trường cục bộ của bạn và không bao giờ gửi ra ngoài. Xem [tài liệu cấu hình AI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md).
+
+</Question>
+
+<Question title="Tôi có cần khởi động lại dev server sau khi thay đổi cấu hình không?">
+
+Thường là không. Watcher của Intlayer giám sát tệp `intlayer.config.ts`: khi bạn lưu tệp, nó sẽ tự động tải lại cấu hình và cập nhật từ điển ở chế độ nền.
+
+</Question>
+
+</FAQ>

package/docs/vi/dictionary/content_file.md

@@ -369,15 +369,15 @@ Chuyển đổi từ điển thành từ điển theo từng locale, trong đó
 
 **Ví dụ:**
 
-```json
+```jsonc
 // Từ điển theo ngôn ngữ
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // Đây trở thành nút dịch cho 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -447,7 +447,7 @@ Hướng dẫn tự động điền nội dung từ điển từ các nguồn b
 
 **Ví dụ:**
 
-```json
+```jsonc
 // Tắt tính năng điền
 {
   "fill": false

package/docs/vi/dictionary/markdown.md

@@ -51,6 +51,7 @@ Bạn có thể khai báo nội dung Markdown bằng cách sử dụng hàm `md`
 
 <Tabs>
   <Tab label=".content.md" value=".content.md">
+
     Bắt đầu từ phiên bản `8.10.0`, bạn có thể khai báo nội dung Markdown trực tiếp trong các tệp `.content.md`. Intlayer sẽ tự động phát hiện và phân tích nội dung Markdown.
 
     ```md fileName="markdown-file.en.content.md"
@@ -96,6 +97,7 @@ Bạn có thể khai báo nội dung Markdown bằng cách sử dụng hàm `md`
     ```
 
   </Tab>
+
   <Tab label="Tệp Bên ngoài" value="external-files">
     Nhập trực tiếp các tệp `.md` bằng cách sử dụng hàm `file`.
 
@@ -129,6 +131,7 @@ Bạn có thể khai báo nội dung Markdown bằng cách sử dụng hàm `md`
     ```
 
   </Tab>
+
 </Tabs>
 
 ## Render Markdown

package/docs/vi/dictionary/plurial.md

@@ -35,9 +35,12 @@ Không giống như [`enu`](https://github.com/aymericzip/intlayer/blob/main/doc
 
 ## Khi nào nên sử dụng `plural` so với `enu`
 
-To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+| Trường hợp sử dụng                                                      | Trợ giúp |
+| ----------------------------------------------------------------------- | -------- |
+| Dạng số nhiều ngữ pháp phù hợp với ngôn ngữ (một quả táo / hai quả táo) | `plural` |
+| Phạm vi số tùy chỉnh (`<5`, `>=10`) hoặc các danh mục ngoài CLDR        | `enu`    |
 
-To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Nếu bạn chỉ nhắm mục tiêu tiếng Anh (chỉ có `one` / `other`), cả hai đều hoạt động. Đối với bất kỳ ngôn ngữ nào có sự phân biệt `few` / `many` / `two`, hãy ưu tiên `plural`.
 
 ## Thiết lập nội dung số nhiều