@intlayer/docs 7.0.7 → 7.0.8

package/docs/vi/how_works_intlayer.md

@@ -0,0 +1,256 @@
+---
+createdAt: 2024-08-12
+updatedAt: 2025-06-29
+title: Cách Thức Hoạt Động của Intlayer
+description: Tìm hiểu cách Intlayer hoạt động bên trong. Hiểu kiến trúc và các thành phần làm cho Intlayer mạnh mẽ.
+keywords:
+  - Intlayer
+  - Cách thức hoạt động
+  - Kiến trúc
+  - Thành phần
+  - Hoạt động nội bộ
+slugs:
+  - doc
+  - concept
+  - how-works-intlayer
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Lịch sử khởi tạo
+---
+
+# Cách Thức Hoạt Động của Intlayer
+
+## Mục Lục
+
+<TOC/>
+
+## Tổng Quan
+
+Ý tưởng chính đằng sau Intlayer là áp dụng quản lý nội dung theo từng thành phần. Vì vậy, ý tưởng của Intlayer là cho phép bạn khai báo nội dung ở bất cứ đâu trong codebase của bạn, ví dụ như trong cùng thư mục với thành phần của bạn.
+
+```bash
+.
+└── Components
+    └── MyComponent
+        ├── index.content.ts
+        └── index.tsx
+```
+
+Để làm được điều đó, vai trò của Intlayer là tìm tất cả các `file khai báo nội dung` của bạn, ở tất cả các định dạng khác nhau có trong dự án của bạn, sau đó nó sẽ tạo ra các `từ điển` từ chúng.
+
+Vì vậy, có hai bước chính:
+
+- Bước xây dựng
+- Bước diễn giải
+
+### Bước xây dựng từ điển
+
+Bước xây dựng có thể được thực hiện theo ba cách:
+
+- sử dụng CLI với lệnh `npx intlayer build`
+- sử dụng [extension vscode](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/vs_code_extension.md)
+- sử dụng các plugin của ứng dụng như [`gói vite-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/vite-intlayer/index.md), hoặc các plugin tương đương cho [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/next-intlayer/index.md). Khi bạn sử dụng một trong những plugin này, Intlayer sẽ tự động xây dựng các từ điển của bạn khi bạn khởi động (dev) hoặc xây dựng (prod) ứng dụng của mình.
+
+1. Khai báo các file nội dung
+   - Các file nội dung có thể được định nghĩa dưới nhiều định dạng khác nhau, chẳng hạn như TypeScript, ECMAScript, CommonJS hoặc JSON.
+   - Các file nội dung có thể được định nghĩa ở bất cứ đâu trong dự án, điều này cho phép bảo trì và mở rộng tốt hơn. Việc tuân thủ quy ước phần mở rộng file cho các file nội dung là rất quan trọng. Phần mở rộng mặc định là `*.content.{js|cjs|mjs|ts|tsx|json}`, nhưng có thể được thay đổi trong [file cấu hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md).
+
+2. Tạo `dictionaries`
+   - Các từ điển được tạo ra từ các file nội dung. Theo mặc định, các từ điển Intlayer được tạo trong thư mục `.intlayer/dictionaries` của dự án.
+   - Các từ điển này được tạo ra ở nhiều định dạng khác nhau để đáp ứng mọi nhu cầu và tối ưu hiệu suất của ứng dụng.
+
+3. Tạo các kiểu cho từ điển
+
+Dựa trên các `dictionaries` của bạn, Intlayer sẽ tạo các kiểu để có thể sử dụng chúng trong ứng dụng của bạn.
+
+- Các kiểu từ điển được tạo từ các `file khai báo nội dung` của Intlayer. Theo mặc định, các kiểu từ điển Intlayer được tạo trong thư mục `.intlayer/types` của dự án.
+
+- Intlayer [mở rộng module](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) là một tính năng của TypeScript cho phép bạn định nghĩa các kiểu bổ sung cho Intlayer. Điều này giúp trải nghiệm phát triển dễ dàng hơn bằng cách gợi ý các đối số có sẵn hoặc các đối số bắt buộc.
+  Trong số các kiểu được tạo ra, các kiểu từ điển Intlayer hoặc thậm chí các kiểu cấu hình ngôn ngữ được thêm vào file `types/intlayer.d.ts`, và được sử dụng bởi các package khác. Để làm được điều này, cần phải cấu hình file `tsconfig.json` để bao gồm thư mục `types` của dự án.
+
+### Bước diễn giải từ điển
+
+Sử dụng Intlayer, bạn sẽ truy cập nội dung trong ứng dụng của mình bằng cách sử dụng hook `useIntlayer`.
+
+```tsx
+const MyComponent = () => {
+  const content = useIntlayer("my-component");
+  return <div>{content.title}</div>;
+};
+```
+
+Hook này sẽ quản lý việc phát hiện locale cho bạn và trả về nội dung cho locale hiện tại. Sử dụng hook này, bạn cũng có thể diễn giải markdown, quản lý số nhiều, và nhiều hơn nữa.
+
+> Để xem tất cả các tính năng của Intlayer, bạn có thể đọc [tài liệu từ điển](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md).
+
+## Nội dung từ xa
+
+Intlayer cho phép bạn khai báo nội dung cục bộ, sau đó xuất chúng sang CMS để đội ngũ không chuyên về kỹ thuật của bạn có thể chỉnh sửa.
+
+Vì vậy, bạn sẽ có thể đẩy và kéo nội dung từ CMS về ứng dụng của mình, tương tự như cách bạn làm với Git cho mã nguồn của mình.
+
+Đối với các từ điển được externalize sử dụng CMS, Intlayer thực hiện một thao tác fetch cơ bản để lấy các từ điển từ xa và hợp nhất chúng với các từ điển cục bộ của bạn. Nếu được cấu hình trong dự án, Intlayer sẽ tự động quản lý việc lấy nội dung từ CMS khi ứng dụng khởi động (dev) / build (prod).
+
+## Trình chỉnh sửa trực quan
+
+Intlayer cũng cung cấp một trình soạn thảo trực quan để cho phép bạn chỉnh sửa nội dung một cách trực quan. [Trình soạn thảo trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_visual_editor.md) này có trong gói bên ngoài `intlayer-editor`.
+
+![trình soạn thảo trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif?raw=true)
+
+- Server là một ứng dụng Express đơn giản lắng nghe các yêu cầu từ client và lấy nội dung của ứng dụng của bạn, chẳng hạn như `dictionaries` và cấu hình để làm cho nó có thể truy cập được trên phía client.
+- Mặt khác, client là một ứng dụng React được sử dụng để tương tác với nội dung của bạn thông qua giao diện trực quan.
+
+Khi bạn gọi nội dung của mình bằng cách sử dụng `useIntlayer` và trình soạn thảo được bật, nó sẽ tự động bao bọc các chuỗi của bạn bằng một đối tượng Proxy có tên là `IntlayerNode`. Node này sử dụng `window.postMessage` để giao tiếp với một iframe được bao bọc chứa giao diện trình soạn thảo trực quan.
+Ở phía trình soạn thảo, trình soạn thảo lắng nghe các thông điệp này và mô phỏng tương tác thực với nội dung của bạn, cho phép bạn chỉnh sửa văn bản trực tiếp trong ngữ cảnh ứng dụng của bạn.
+
+## Tối ưu hóa build ứng dụng
+
+Để tối ưu kích thước gói của ứng dụng của bạn, Intlayer cung cấp hai plugin để tối ưu quá trình build ứng dụng của bạn: các plugin `@intlayer/babel` và `@intlayer/swc`.
+
+Các plugin Babel và SWC hoạt động bằng cách phân tích Cây Cú Pháp Trừu Tượng (AST) của ứng dụng của bạn để thay thế các lời gọi hàm Intlayer bằng mã được tối ưu hóa. Quá trình này giúp gói cuối cùng của bạn nhẹ hơn trong môi trường production bằng cách đảm bảo chỉ những từ điển thực sự được sử dụng mới được nhập khẩu, tối ưu hóa việc chia nhỏ gói và giảm kích thước gói.
+
+Trong chế độ phát triển, Intlayer sử dụng việc nhập khẩu tĩnh tập trung cho các từ điển nhằm đơn giản hóa trải nghiệm phát triển.
+
+Bằng cách kích hoạt tùy chọn `importMode = "dynamic"` trong [cấu hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md), Intlayer sẽ sử dụng import động để tải các từ điển. Tùy chọn này mặc định bị tắt để tránh xử lý bất đồng bộ khi render ứng dụng.
+
+> `@intlayer/babel` có sẵn theo mặc định trong gói `vite-intlayer`,
+
+> `@intlayer/swc` không được cài đặt theo mặc định trong gói `next-intlayer` vì các plugin SWC vẫn đang trong giai đoạn thử nghiệm trên Next.js.
+
+Để xem cách cấu hình quá trình build ứng dụng của bạn, bạn có thể đọc [tài liệu cấu hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md).
+
+## Các gói
+
+Intlayer bao gồm nhiều gói, mỗi gói có một vai trò cụ thể trong quá trình dịch thuật. Dưới đây là biểu đồ thể hiện cấu trúc của các gói này:
+
+![các gói của intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/packages_dependency_graph.svg)
+
+### intlayer
+
+Gói `intlayer` được sử dụng trong các ứng dụng để khai báo nội dung trong các tệp nội dung.
+
+### react-intlayer
+
+Gói `react-intlayer` được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng React.
+
+### next-intlayer
+
+Gói `next-intlayer` được sử dụng như một lớp trên `react-intlayer` để làm cho các từ điển Intlayer có thể sử dụng trong các ứng dụng Next.js. Nó tích hợp các tính năng thiết yếu để làm cho Intlayer hoạt động trong môi trường Next.js, chẳng hạn như middleware dịch thuật, định tuyến, hoặc cấu hình tệp `next.config.js`.
+
+### vue-intlayer
+
+Gói `vue-intlayer` được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng Vue.
+
+### nuxt-intlayer
+
+Gói `nuxt-intlayer` là một module Nuxt để làm cho các từ điển Intlayer có thể sử dụng trong các ứng dụng Nuxt. Nó tích hợp các tính năng thiết yếu để làm cho Intlayer hoạt động trong môi trường Nuxt, chẳng hạn như middleware dịch thuật, định tuyến, hoặc cấu hình tệp `nuxt.config.js`.
+
+### svelte-intlayer (Đang phát triển)
+
+Gói `svelte-intlayer` được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng Svelte.
+
+### solid-intlayer (Đang phát triển)
+
+Gói `solid-intlayer` được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng Solid.js.
+
+### preact-intlayer
+
+Gói `preact-intlayer` được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng Preact.
+
+### angular-intlayer (Đang phát triển)
+
+Gói `angular-intlayer` được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng Angular.
+
+### express-intlayer
+
+Gói `express-intlayer` được sử dụng để dùng Intlayer trên backend Express.js.
+
+### react-native-intlayer
+
+Gói `react-native-intlayer` cung cấp các công cụ tích hợp plugin để Intlayer hoạt động với Metro bundler.
+
+### lynx-intlayer
+
+Gói `lynx-intlayer` cung cấp các công cụ tích hợp plugin để Intlayer hoạt động với Lynx bundler.
+
+### vite-intlayer
+
+Bao gồm plugin Vite để tích hợp Intlayer với [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), cũng như middleware để phát hiện ngôn ngữ ưu tiên của người dùng, quản lý cookie và xử lý chuyển hướng URL.
+
+### react-scripts-intlayer
+
+Bao gồm các lệnh và plugin `react-scripts-intlayer` để tích hợp Intlayer với ứng dụng dựa trên Create React App. Các plugin này dựa trên [craco](https://craco.js.org/) và bao gồm cấu hình bổ sung cho bundler [Webpack](https://webpack.js.org/).
+
+### intlayer-editor
+
+Gói `intlayer-editor` được sử dụng để cho phép sử dụng trình soạn thảo trực quan. Gói này là tùy chọn, có thể được cài đặt trong các ứng dụng và sẽ được gói `react-intlayer` sử dụng.
+Nó bao gồm hai phần: server và client.
+
+Client chứa các thành phần giao diện người dùng sẽ được `react-intlayer` sử dụng.
+
+Server, dựa trên Express, được sử dụng để nhận các yêu cầu từ trình soạn thảo trực quan và quản lý hoặc chỉnh sửa các tệp nội dung.
+
+### intlayer-cli
+
+Gói `intlayer-cli` có thể được sử dụng để tạo từ điển bằng lệnh `npx intlayer dictionaries build`. Nếu `intlayer` đã được cài đặt, CLI sẽ tự động được cài đặt và gói này không cần thiết.
+
+### @intlayer/core
+
+Gói `@intlayer/core` là gói chính của Intlayer. Nó chứa các chức năng quản lý dịch thuật và từ điển. `@intlayer/core` đa nền tảng và được các gói khác sử dụng để thực hiện việc diễn giải từ điển.
+
+### @intlayer/config
+
+Gói `@intlayer/config` được sử dụng để cấu hình các thiết lập của Intlayer, chẳng hạn như các ngôn ngữ có sẵn, các tham số middleware của Next.js, hoặc các thiết lập của trình soạn thảo tích hợp.
+
+### @intlayer/webpack
+
+Gói `@intlayer/webpack` được sử dụng để cung cấp cấu hình Webpack nhằm giúp một ứng dụng dựa trên Webpack hoạt động với Intlayer. Gói này cũng cung cấp một plugin để thêm vào một ứng dụng Webpack hiện có.
+
+### @intlayer/cli
+
+Gói `@intlayer/cli` là một gói NPM được sử dụng để khai báo các script liên quan đến giao diện dòng lệnh Intlayer. Nó đảm bảo tính đồng nhất của tất cả các lệnh CLI của Intlayer. Gói này đặc biệt được sử dụng bởi các gói [intlayer-cli](https://github.com/aymericzip/intlayer/tree/main/docs/vi/packages/intlayer-cli/index.md) và [intlayer](https://github.com/aymericzip/intlayer/tree/main/docs/vi/packages/intlayer/index.md).
+
+### @intlayer/mcp
+
+Gói `@intlayer/mcp` cung cấp một server MCP (Model Context Protocol) mang đến sự hỗ trợ IDE được trang bị AI, được tùy chỉnh cho hệ sinh thái Intlayer. Nó tự động tải tài liệu và tích hợp với CLI của Intlayer.
+
+### @intlayer/dictionaries-entry & @intlayer/unmerged-dictionaries-entry & @intlayer/dynamic-dictionaries-entry
+
+Gói `@intlayer/dictionaries-entry`, `@intlayer/unmerged-dictionaries-entry` và `@intlayer/dynamic-dictionaries-entry` trả về đường dẫn entry của các từ điển Intlayer. Vì việc tìm kiếm hệ thống tập tin từ trình duyệt là không thể, nên việc sử dụng các bundler như Webpack hoặc Rollup để lấy đường dẫn entry của các từ điển cũng không khả thi. Các gói này được thiết kế để được alias, cho phép tối ưu hóa bundling trên nhiều bundler khác nhau như Vite, Webpack và Turbopack.
+
+### @intlayer/chokidar
+
+Gói `@intlayer/chokidar` được sử dụng để giám sát các tập tin nội dung và tái tạo lại từ điển đã chỉnh sửa mỗi khi có thay đổi.
+
+### @intlayer/editor
+
+Gói `@intlayer/editor` cung cấp các tiện ích liên quan đến trình chỉnh sửa từ điển. Nó đặc biệt bao gồm API để kết nối một ứng dụng với trình chỉnh sửa Intlayer, và các tiện ích để thao tác với các từ điển. Gói này hỗ trợ đa nền tảng.
+
+### @intlayer/editor-react
+
+Gói `@intlayer/editor-react` cung cấp các state, context, hook và component để kết nối một ứng dụng React với trình chỉnh sửa Intlayer.
+
+### @intlayer/babel
+
+Gói `@intlayer/babel` cung cấp các công cụ tối ưu hóa việc bundling các từ điển cho các ứng dụng dựa trên Vite và Webpack.
+
+### @intlayer/swc
+
+Gói `@intlayer/swc` cung cấp các công cụ tối ưu hóa việc bundling các từ điển cho các ứng dụng Next.js.
+
+### @intlayer/api
+
+Gói `@intlayer/api` là một SDK API để tương tác với backend.
+
+### @intlayer/design-system
+
+Gói `@intlayer/design-system` được sử dụng để chia sẻ các yếu tố thiết kế giữa CMS và trình chỉnh sửa Visual.
+
+### @intlayer/backend
+
+Gói `@intlayer/backend` xuất các kiểu backend và sẽ sớm cung cấp backend như một gói độc lập trong tương lai.
+
+## Trò chuyện với tài liệu thông minh của chúng tôi
+
+- [Đặt câu hỏi của bạn với tài liệu thông minh của chúng tôi](https://intlayer.org/doc/chat)

package/docs/vi/index.md

@@ -0,0 +1,174 @@
+---
+createdAt: 2025-02-07
+updatedAt: 2025-06-29
+title: Tài liệu Intlayer - Hướng dẫn i18n hoàn chỉnh cho JavaScript
+description: Tài liệu hoàn chỉnh cho Intlayer, thư viện quốc tế hóa hiện đại cho JavaScript, React, Next.js, Express và nhiều framework khác.
+keywords:
+  - intlayer
+  - quốc tế hóa
+  - i18n
+  - JavaScript
+  - React
+  - Next.js
+  - tài liệu
+  - dịch thuật
+  - đa ngôn ngữ
+slugs:
+  - doc
+  - index
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Khởi tạo lịch sử
+---
+
+# Tài liệu Intlayer
+
+Chào mừng bạn đến với tài liệu chính thức của **Intlayer**! Ở đây, bạn sẽ tìm thấy mọi thứ cần thiết để tích hợp, cấu hình và làm chủ Intlayer cho tất cả các nhu cầu quốc tế hóa (i18n) của bạn, dù bạn đang làm việc với **Next.js**, **React**, **Vite**, **Express**, hay môi trường JavaScript khác.
+
+Intlayer cung cấp một phương pháp linh hoạt và hiện đại để dịch ứng dụng của bạn. Tài liệu của chúng tôi sẽ hướng dẫn bạn từ việc cài đặt và thiết lập đến các tính năng nâng cao như **dịch thuật hỗ trợ AI**, định nghĩa **TypeScript**, và hỗ trợ **server component**, giúp bạn tạo ra trải nghiệm đa ngôn ngữ liền mạch.
+
+---
+
+## Bắt đầu
+
+- **[Giới thiệu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/introduction.md)**  
+  Nhận tổng quan về cách Intlayer hoạt động, các tính năng cốt lõi của nó, và lý do tại sao nó là một bước đột phá cho i18n.
+
+- **[Cách Intlayer Hoạt Động](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/how_works_intlayer.md)**  
+  Tìm hiểu sâu về thiết kế kiến trúc và cách Intlayer xử lý mọi thứ từ khai báo nội dung đến việc cung cấp bản dịch.
+
+- **[Cấu Hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md)**  
+  Tùy chỉnh Intlayer để phù hợp với nhu cầu dự án của bạn. Khám phá các tùy chọn middleware, cấu trúc thư mục, và các thiết lập nâng cao.
+
+- **[Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_cli.md)**  
+  Quản lý nội dung và bản dịch bằng công cụ dòng lệnh của chúng tôi. Khám phá cách đẩy và kéo nội dung, tự động hóa bản dịch, và nhiều hơn nữa.
+
+- **[Trình Soạn Thảo Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_visual_editor.md)**  
+  Đơn giản hóa việc cộng tác với những người không phải là nhà phát triển và tăng cường bản dịch của bạn với AI, trực tiếp trong CMS miễn phí và trực quan của chúng tôi.
+
+---
+
+## Các Khái Niệm Cốt Lõi
+
+### Từ Điển
+
+Tổ chức nội dung đa ngôn ngữ của bạn gần với mã nguồn để giữ mọi thứ nhất quán và dễ bảo trì.
+
+- **[Bắt Đầu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md)**  
+  Tìm hiểu những kiến thức cơ bản về cách khai báo nội dung trong Intlayer.
+
+- **[Bản Dịch](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/translation.md)**  
+  Hiểu cách bản dịch được tạo ra, lưu trữ và sử dụng trong ứng dụng của bạn.
+
+- **[Liệt Kê](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/enumeration.md)**  
+  Quản lý dễ dàng các tập dữ liệu lặp lại hoặc cố định trên nhiều ngôn ngữ khác nhau.
+
+- **[Điều Kiện](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/conditional.md)**  
+  Tìm hiểu cách sử dụng logic điều kiện trong Intlayer để tạo nội dung động.
+
+- **[Giới Tính](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/gender.md)**  
+  Tìm hiểu cách sử dụng logic giới tính trong Intlayer để tạo nội dung động.
+
+- **[Chèn](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/insertion.md)**
+  Khám phá cách chèn giá trị vào chuỗi bằng cách sử dụng các chỗ giữ chèn.
+
+- **[Lấy Hàm](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/function_fetching.md)**  
+  Xem cách lấy nội dung động với logic tùy chỉnh để phù hợp với quy trình làm việc của dự án bạn.
+
+- **[Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/markdown.md)**  
+  Tìm hiểu cách sử dụng Markdown trong Intlayer để tạo nội dung phong phú.
+
+- **[Nhúng Tệp](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/file_embeddings.md)**  
+  Khám phá cách nhúng các tệp bên ngoài trong Intlayer để sử dụng chúng trong trình soạn thảo nội dung.
+
+- **[Lồng nhau](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/nesting.md)**  
+  Hiểu cách lồng nội dung trong Intlayer để tạo các cấu trúc phức tạp.
+
+---
+
+## Môi trường & Tích hợp
+
+Chúng tôi xây dựng Intlayer với sự linh hoạt trong tâm trí, cung cấp tích hợp liền mạch với các framework và công cụ xây dựng phổ biến:
+
+- **[Intlayer với Next.js 16](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nextjs_16.md)**
+- **[Intlayer với Next.js 15](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nextjs_15.md)**
+- **[Intlayer với Next.js 14 (App Router)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nextjs_14.md)**
+- **[Intlayer với Next.js Page Router](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nextjs_page_router.md)**
+- **[Intlayer với React CRA](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_create_react_app.md)**
+- **[Intlayer với Vite + React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+react.md)**
+- **[Intlayer với React Router v7](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_react_router_v7.md)**
+- **[Intlayer với Tanstack Start](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_tanstack.md)**
+- **[Intlayer với React Native và Expo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_react_native+expo.md)**
+- **[Intlayer với Lynx và React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_lynx+react.md)**
+- **[Intlayer với Vite + Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+preact.md)**
+- **[Intlayer với Vite + Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+vue.md)**
+- **[Intlayer với Nuxt](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nuxt.md)**
+- **[Intlayer với Express](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_express.md)**
+- **[Intlayer với NestJS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nestjs.md)**
+- **[Intlayer với Angular](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_angular.md)**
+
+Mỗi hướng dẫn tích hợp bao gồm các thực hành tốt nhất để sử dụng các tính năng của Intlayer, như **render phía máy chủ (server-side rendering)**, **định tuyến động (dynamic routing)**, hoặc **render phía khách (client-side rendering)**, giúp bạn duy trì một ứng dụng nhanh, thân thiện với SEO và có khả năng mở rộng cao.
+
+---
+
+## Các gói
+
+Thiết kế mô-đun của Intlayer cung cấp các gói chuyên biệt cho các môi trường và nhu cầu cụ thể:
+
+### `intlayer`
+
+Các hàm tiện ích cốt lõi để cấu hình và quản lý thiết lập i18n của bạn.
+
+- **[getConfiguration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/intlayer/getConfiguration.md)**
+- **[getHTMLTextDir](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/intlayer/getHTMLTextDir.md)**
+- **[getLocaleLang](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/intlayer/getLocaleLang.md)**
+- **[getLocaleName](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/intlayer/getLocaleName.md)**
+- **[getLocalizedUrl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/intlayer/getLocalizedUrl.md)**
+- **[getMultilingualUrls](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/intlayer/getMultilingualUrls.md)**
+- **[getPathWithoutLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/intlayer/getPathWithoutLocale.md)**
+- **[getTranslation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/intlayer/getTranslation.md)**
+- **[getEnumeration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/intlayer/getEnumeration.md)**
+
+### `express-intlayer`
+
+Tận dụng Intlayer trong các ứng dụng dựa trên **Express**:
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/express-intlayer/t.md)**  
+  Một trợ giúp dịch thuật tối giản, dễ sử dụng cho các route và view trên server của bạn.
+
+### `react-intlayer`
+
+Nâng cao các ứng dụng **React** của bạn với các hook mạnh mẽ:
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/t.md)**
+- **[useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useIntlayer.md)**
+- **[useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useDictionary.md)**
+- **[useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useLocale.md)**
+
+### `next-intlayer`
+
+Tích hợp liền mạch với **Next.js**:
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/next-intlayer/t.md)**
+- **[useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/next-intlayer/useIntlayer.md)**
+- **[useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/next-intlayer/useDictionary.md)**
+- **[useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/next-intlayer/useLocale.md)**
+
+---
+
+## Tài nguyên bổ sung
+
+- **[Blog: Intlayer và i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_i18next.md)**  
+  Tìm hiểu cách Intlayer bổ sung và so sánh với thư viện phổ biến **i18next**.
+
+- **[Hướng dẫn trực tiếp trên YouTube](https://youtu.be/W2G7KxuSD4c?si=GyU_KpVhr61razRw)**  
+  Xem một bản demo toàn diện và học cách tích hợp Intlayer theo thời gian thực.
+
+---
+
+## Đóng góp & Phản hồi
+
+Chúng tôi đánh giá cao sức mạnh của phát triển mã nguồn mở và cộng đồng. Nếu bạn muốn đề xuất cải tiến, thêm hướng dẫn mới, hoặc sửa bất kỳ vấn đề nào trong tài liệu của chúng tôi, hãy thoải mái gửi Pull Request hoặc mở một issue trên [kho GitHub của chúng tôi](https://github.com/aymericzip/intlayer/blob/main/docs/docs).
+
+**Sẵn sàng dịch ứng dụng của bạn nhanh hơn và hiệu quả hơn?** Hãy khám phá tài liệu của chúng tôi để bắt đầu sử dụng Intlayer ngay hôm nay. Trải nghiệm một phương pháp quốc tế hóa mạnh mẽ, tinh gọn giúp giữ nội dung của bạn có tổ chức và đội ngũ của bạn làm việc hiệu quả hơn.