@intlayer/docs 9.5.6 → 9.5.7

package/blog/vi/next-intl_vs_intlayer-next-intl.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "next-intl vs @intlayer/next-intl: Cùng API, Bundle Khác Nhau"
 description: Những thay đổi khi các import next-intl của một ứng dụng Next.js được phục vụ bởi compat adapter @intlayer/next-intl. Kích thước bundle, rò rỉ, kích thước component và hydration được đo lường trên cùng một code, cộng với những gì adapter giữ lại, bỏ qua và không thể thay thế.
 keywords:
@@ -26,6 +26,8 @@ author: aymericzip
 
 # next-intl VS @intlayer/next-intl | Cùng API, Bundle Khác Nhau
 
+![next-intl VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
+
 `@intlayer/next-intl` là một compat adapter: nó cung cấp API của `next-intl` (`useTranslations`, `getTranslations`, `useLocale`, `t.rich()`, ICU plurals, `NextIntlClientProvider`...) và phục vụ nó từ các từ điển được biên dịch bởi Intlayer. Mã ứng dụng không thay đổi. Bundle thì có.
 
 Bài viết này so sánh hai cái trên cùng một ứng dụng Next.js, được xây dựng một lần với `next-intl` và một lần với adapter. Các con số này đến từ [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), một bộ mã nguồn mở ghi lại những gì trình duyệt thực sự tải xuống. Nếu bạn muốn so sánh `next-intl` vs Intlayer dưới dạng các thư viện, hãy đọc [next-intl vs Intlayer](https://intlayer.org/blog/next-intl-vs-intlayer). Cái này là về những gì adapter thay đổi khi bạn giữ nguyên các component của mình.
@@ -109,6 +111,10 @@ Suite [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) xây d
 
 ### Kết quả trên Next.js
 
+Chọn các chỉ số và thư viện mà bạn quan tâm:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | Setup                     | Strategy       | Lib size (gz) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity |   Hydration |
 | ------------------------- | -------------- | ------------: | ---------------: | ----------: | --------: | -----------------: | -------------: | ----------: |
 | **base** (no i18n)        | -              |        0.0 KB |         141.0 KB |        0.0% |      0.0% |             0.9 KB |        13.4 ms |     11.8 ms |
@@ -129,6 +135,15 @@ Suite [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) xây d
 - **Hydration nhanh hơn 2 ms** (12.8 vs 14.7 ms): không có message object để deserialize từ RSC payload trước khi React có thể hydrate.
 - **Adapter không phải là native runtime.** `next-intlayer` nằm ở **141.3 KB**, +0.3 KB so với base app, với 5.5 KB runtime. Adapter mang API surface của `next-intl` (`useFormatter`, `t.rich`, ICU resolver) trên top của core của Intlayer, do đó 8.0 KB và +6 KB trên mỗi page. Đó là cây cầu, không phải đích đến.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Bảng đầy đủ, từng thư viện và từng chiến lược, trong [báo cáo benchmark Next.js](https://intlayer.org/vi/doc/benchmark/nextjs).
+
 ### Kết quả trên TanStack Start (`use-intl`)
 
 `use-intl` là core framework-agnostic của `next-intl`. Adapter của nó, `@intlayer/use-intl`, tuân theo cùng design với Vite plugin (`@intlayer/use-intl/plugin`).
@@ -152,11 +167,24 @@ Suite [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) xây d
 - **Chuyển đổi locale nhanh hơn.** Các setup `use-intl` được tối ưu hóa mất **13-21 ms** để cập nhật `html[lang]`; adapter mất **4-9 ms**. Ít component hơn được re-render, và không có gì được lấy lại từ một message tree.
 - **`static` giữ lại mọi locale.** Hàng `static` của adapter cho thấy 49.7% rò rỉ locale, giống như native Intlayer ở chế độ `static`: tất cả locale được bundled, chỉ các từ điển của trang được bundled. Một dòng config (`importMode: 'dynamic'`) sẽ loại bỏ nó.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-tanstack.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Bảng đầy đủ trong [báo cáo benchmark TanStack Start](https://intlayer.org/vi/doc/benchmark/tanstack).
+
 ## Tại sao các con số thay đổi
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 Không có gì trong component thay đổi, vì vậy các lợi ích đều đến từ những gì `useTranslations` được liên kết tới.
 
-**Với `next-intl`**, ràng buộc là provider. `NextIntlClientProvider` nhận toàn bộ object `messages` cho locale; mỗi `useTranslations("about")` đọc từ nó. Bundler thấy một component import một hook đọc một context, và không thể biết rằng chỉ có branch `about` được sử dụng. Các routes dưới đây đều chia sẻ cùng một object message, vì vậy cột page-leak đọc ~90% cho đến khi bạn tự chia nhỏ file.
+**Với `next-intl`**, ràng buộc là provider. `NextIntlClientProvider` nhận toàn bộ object `messages` cho locale; mỗi `useTranslations("about")` đọc từ nó. Bundler thấy một component import một hook đọc một context, và không thể biết rằng chỉ có branch `about` được sử dụng. Các routes dưới đây đều chia sẻ cùng một object message, vì vậy cột page-leak đọc ~90% cho đến khi bạn tự chia nhỏ file, và sự lãng phí tăng lên theo cả hai chiều cùng lúc: số trang và số ngôn ngữ:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 ```bash
 .
@@ -280,25 +308,106 @@ export default withIntlayer(nextConfig);
 
 ## Những giới hạn cần biết trước khi bạn bắt đầu
 
-- **Routing config chuyển sang `intlayer.config.ts`.** `createNavigation(routing)` và `createMiddleware(routing)` giữ nguyên signature của chúng nhưng bỏ qua argument: locales, default locale và prefix strategy đến từ Intlayer's `routing` config. Nếu bạn sử dụng `next-intl`'s localized `pathnames` (`/about` → `/a-propos`), adapter không interpolate chúng; Intlayer's `routing.rewrite` bao gồm trường hợp đó nhưng đó là một thay đổi riêng biệt.
-- **Namespace-less `useTranslations()` không được bind.** Optimize pass cần một namespace tĩnh để biết dictionary nào cần import. Một bare call vẫn hoạt động thông qua một runtime registry tham chiếu đến mọi dictionary, đó chính xác là sự rò rỉ mà bạn đang cố gắng loại bỏ. Truyền namespace.
-- **Adapter không miễn phí.** 8.0 KB runtime so với 5.5 KB cho `next-intlayer`, và +6-7 KB cho mỗi trang so với native build. Nó chi trả cho bề mặt API của `next-intl`. Nếu bạn đến điểm mà mọi component đã được chuyển sang `useIntlayer`, hãy bỏ adapter.
-- **`messages`, `timeZone`, `now` trên provider bị bỏ qua.** Các formatter được hỗ trợ bởi `Intl` native và chỉ locale ảnh hưởng đến output của chúng; nếu bạn dựa vào một time zone bắt buộc hoặc một `now` cố định cho các ngày ổn định hydration, hãy xử lý nó tại call site.
+<AccordionGroup>
+<Accordion header="Cấu hình định tuyến chuyển sang intlayer.config.ts">
+
+`createNavigation(routing)` và `createMiddleware(routing)` giữ nguyên cú pháp nhưng bỏ qua đối số: ngôn ngữ, ngôn ngữ mặc định và chiến lược tiền tố đều lấy từ cấu hình `routing` của Intlayer. Nếu bạn sử dụng `pathnames` đã bản địa hóa của `next-intl` (`/about` sang `/a-propos`), adapter sẽ không nội suy chúng; `routing.rewrite` của Intlayer hỗ trợ trường hợp này nhưng là một cấu hình riêng.
+
+</Accordion>
+<Accordion header="useTranslations() không có namespace sẽ không được liên kết">
+
+Quá trình tối ưu hóa cần một namespace tĩnh để biết cần import từ điển nào. Một lệnh gọi không tham số vẫn hoạt động thông qua một registry lúc runtime tham chiếu đến mọi từ điển, nhưng đó chính xác là sự rò rỉ mà bạn đang cố loại bỏ. Hãy truyền namespace.
+
+</Accordion>
+<Accordion header="Adapter không hoàn toàn miễn phí">
+
+8.0 KB runtime so với 5.5 KB của `next-intlayer`, và tăng thêm +6-7 KB mỗi trang so với bản build gốc. Đây là chi phí cho bề mặt API của `next-intl`. Khi mọi component đã được chuyển sang `useIntlayer`, hãy gỡ bỏ adapter.
+
+</Accordion>
+<Accordion header="messages, timeZone và now trên provider bị bỏ qua">
+
+Các trình định dạng được hỗ trợ bởi `Intl` gốc và chỉ có ngôn ngữ mới ảnh hưởng đến kết quả. Nếu bạn phụ thuộc vào múi giờ bắt buộc hoặc một giá trị `now` cố định cho ngày tháng ổn định khi hydrate, hãy xử lý tại nơi gọi. Xem [định dạng ngày, giờ và số](https://intlayer.org/vi/blog/date-time-number-formatting-locales).
+
+</Accordion>
+</AccordionGroup>
 
 ## Khi nào nên sử dụng cái nào?
 
-- **Tiếp tục với `next-intl`** nếu ứng dụng của bạn nhỏ, bundle của bạn không phải là mối quan tâm, và team của bạn thoải mái sở hữu namespaces và `pick()` cho mỗi trang.
-- **Sử dụng `@intlayer/next-intl`** nếu bạn đang dùng `next-intl` và muốn có những lợi ích về bundle, rò rỉ và hydration, typed keys cũng như CLI / CMS tooling mà không cần viết lại toàn bộ. Đây là điểm vào được khuyến nghị cho bất kỳ codebase `next-intl` hiện có nào.
-- **Đi native (`next-intlayer`)** cho các dự án mới, hoặc khi adapter đã hoàn thành công việc của nó. Đây là lựa chọn nhẹ nhất trong ba cái (5.5 KB, +0.3 KB per page) và mở khóa các server components đồng bộ, các file `.content.ts` per-component và bộ tính năng đầy đủ.
+<AccordionGroup>
+<Accordion header="Ở lại với next-intl">
+
+Ứng dụng của bạn nhỏ, kích thước gói không phải mối bận tâm và nhóm của bạn thoải mái quản lý thủ công namespace và `pick()` trên từng trang.
+
+</Accordion>
+<Accordion header="Sử dụng @intlayer/next-intl">
+
+Bạn đang dùng `next-intl` và muốn giảm kích thước bundle, hạn chế rò rỉ, tăng tốc hydrate, khóa có kiểu dữ liệu rõ ràng và bộ công cụ CLI / CMS mà không cần viết lại mã. Đây là điểm khởi đầu được khuyến nghị cho bất kỳ dự án `next-intl` nào.
+
+</Accordion>
+<Accordion header="Chuyển sang bản gốc (next-intlayer)">
+
+Dành cho các dự án mới, hoặc khi adapter đã hoàn thành nhiệm vụ chuyển tiếp. Đây là giải pháp nhẹ nhất trong cả ba (5.5 KB, +0.3 KB mỗi trang) và mở khóa các server component đồng bộ, tệp `.content.ts` theo từng component cùng đầy đủ tính năng. Bắt đầu với [Intlayer với Next.js](https://intlayer.org/vi/doc/environment/nextjs).
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ
+
+<FAQ>
+
+<Question title="Mã ứng dụng của tôi có thực sự không bị xáo trộn không?">
+
+Trên Next.js, câu trả lời là có đối với các component: bản build benchmark chỉ sửa đổi `next.config.ts` và `intlayer.config.ts`. `getRequestConfig` trong `src/i18n.ts`, prop `messages` trên provider và các lệnh gọi `pick()` theo trang trở thành mã chết mà bạn có thể xóa sau đó.
+
+</Question>
+
+<Question title="Điều gì xảy ra với các thông điệp ICU?">
+
+Chúng vẫn hoạt động bình thường. `t("key", { count })`, `t.rich()`, `t.markup()`, `select`, `selectordinal`, `#` và `{ts, date, long}` đều được xử lý bởi bộ giải quyết ICU của Intlayer. Xem [định dạng thông điệp ICU](https://intlayer.org/vi/blog/icu-message-format).
+
+</Question>
+
+<Question title="Tại sao adapter lại nặng hơn next-intlayer gốc?">
+
+Nó mang theo bề mặt API của `next-intl` bên trên lõi Intlayer: `useFormatter`, `t.rich`, bộ giải quyết ICU, các helper điều hướng. Điều đó tốn 8.0 KB so với 5.5 KB, và thêm +6 KB mỗi trang. Đó là chiếc cầu nối, không phải đích đến.
+
+</Question>
+
+<Question title="Tôi có thể di chuyển từng component một không?">
+
+Có. Bất kỳ component nào cũng có thể chuyển từ `useTranslations("about")` sang `useIntlayer("about")` với tệp `.content.ts` đặt cùng vị trí. Các từ điển JSON và `.content.ts` cùng tồn tại và hợp nhất liền mạch.
+
+</Question>
+
+<Question title="Các đường dẫn đã bản địa hóa (pathnames) có hoạt động không?">
+
+Không hoạt động thông qua `pathnames` của `next-intl`: adapter chấp nhận nó để kiểm tra kiểu nhưng không nội suy. Thay vào đó, hãy sử dụng `routing.rewrite` của Intlayer.
+
+</Question>
+
+</FAQ>
 
 ## Các so sánh liên quan
 
-- [next-intl vs Intlayer](https://intlayer.org/blog/next-intl-vs-intlayer) (các thư viện, cùng benchmark)
-- [i18next vs @intlayer/i18next](https://intlayer.org/blog/i18next-vs-intlayer-i18next) (cùng chuỗi adapter)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/blog/lingui-vs-intlayer-lingui) (cùng chuỗi adapter)
-- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/blog/vue-i18n-vs-intlayer-vue-i18n) (cùng chuỗi adapter)
-- [Hướng dẫn di chuyển: next-intl sang Intlayer](https://intlayer.org/doc/migration/next-intl)
-- [Tham khảo adapter tương thích: next-intl](https://intlayer.org/doc/compatibility/next-intl)
+Cùng loạt adapter:
+
+- [i18next vs @intlayer/i18next](https://intlayer.org/vi/blog/i18next-vs-intlayer-i18next)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/vi/blog/lingui-vs-intlayer-lingui)
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-vue-i18n)
+
+So sánh trực tiếp các thư viện:
+
+- [next-intl vs Intlayer](https://intlayer.org/vi/blog/next-intl-vs-intlayer), cùng benchmark
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/vi/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [Is next-intl outdated?](https://intlayer.org/vi/blog/is-next-intl-outdated)
+
+Tài liệu tham khảo:
+
+- [Compat adapter: next-intl](https://intlayer.org/vi/doc/compatibility/next-intl)
+- [Hướng dẫn di chuyển: từ next-intl sang Intlayer](https://intlayer.org/vi/doc/migration/next-intl)
+- [Báo cáo benchmark Next.js](https://intlayer.org/vi/doc/benchmark/nextjs) và [báo cáo benchmark TanStack Start](https://intlayer.org/vi/doc/benchmark/tanstack)
+- [Tối ưu hóa bundle](https://intlayer.org/vi/doc/concept/bundle-optimization) và [trình biên dịch Intlayer](https://intlayer.org/vi/doc/compiler)
+- [Visual Editor](https://intlayer.org/vi/doc/concept/editor), [CMS](https://intlayer.org/vi/doc/concept/cms) và [dịch thuật AI](https://intlayer.org/vi/doc/concept/auto-fill)
 
 ## Kết luận
 

package/blog/vi/next-intl_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "next-intl vs Intlayer: Điểm chuẩn & So sánh 2026"
 description: "So sánh chi tiết giữa next-intl và Intlayer trên Next.js App Router và TanStack Start. Kích thước bundle, rò rỉ nội dung, kích thước component, hydrate và trải nghiệm lập trình viên."
 keywords:
@@ -22,15 +22,15 @@ author: aymericzip
 
 # next-intl VS Intlayer | Điểm chuẩn quốc tế hóa (i18n) trên React & Next.js
 
-`next-intl` là lựa chọn mặc định cho i18n trên Next.js App Router hiện nay: tích hợp chặt chẽ với định tuyến, hỗ trợ đầy đủ ICU MessageFormat, và trải nghiệm lập trình quen thuộc với bất kỳ ai từng sử dụng các hệ thống i18n truyền thống.
+![next-intl VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
 
-`Intlayer` tiếp cận vấn đề theo một hướng hoàn toàn mới: không có từ điển tập trung, không cần khớp nối thủ công giữa namespace và route. Nội dung được khai báo ngay cạnh từng component, và trình biên dịch tại thời điểm build sẽ chỉ đóng gói đúng những gì trang đó thực sự cần.
+`next-intl` là thư viện i18n phổ biến nhất cho Next.js. Intlayer là một giải pháp thay thế dựa trên trình biên dịch, có phạm vi theo component. Cả hai đều bản địa hóa ứng dụng App Router. Câu hỏi là chi phí thực tế của mỗi thư viện sau khi ứng dụng được xây dựng.
 
-Bài viết này so sánh cả hai thư viện dựa trên dữ liệu từ [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), một bộ kiểm thử mã nguồn mở xây dựng cùng một ứng dụng với mỗi thư viện và ghi lại những gì trình duyệt thực sự tải xuống và thực thi.
+Bài viết này không phải là hướng dẫn. Đây là một so sánh được hỗ trợ bởi các số liệu từ [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), một bộ benchmark mã nguồn mở xây dựng cùng một ứng dụng với mỗi thư viện và đo lường những gì trình duyệt thực sự tải xuống và thực thi.
 
 <TOC/>
 
-> **Tóm tắt (tl;dr)**: `next-intl` làm tăng ít nhất **+12.6 KB gzip** trên mỗi trang chỉ riêng cho runtime của nó, và làm rò rỉ **~90% chuỗi ký tự của các trang khác** trong các cấu hình tiêu chuẩn (`static` và `dynamic`). Để loại bỏ sự rò rỉ đó, lập trình viên phải chia nhỏ danh mục thành các namespace và chọn thủ công cho từng trang. Ngược lại, trình biên dịch của `Intlayer` đảm bảo **0% rò rỉ**, component **nhỏ hơn gấp 3 lần**, và chỉ tốn thêm **+0.3 KB** so với ứng dụng gốc mà không cần cấu hình phức tạp.
+> **tl;dr**: Trên cùng một ứng dụng Next.js, `next-intl` tăng thêm **+12.6 KB gzip** JavaScript trên mỗi trang, so với **+0.3 KB** của Intlayer. Nếu không tối ưu thêm, `next-intl` gửi kèm **~90% chuỗi ký tự của các trang khác** trên mỗi trang. Đạt mức rò rỉ 0% với `next-intl` yêu cầu phân chia namespace và sử dụng `pick(messages, [...])` trên từng trang. Intlayer đạt 0% theo mặc định vì trình biên dịch phân tách nội dung theo từng component. Nếu bạn muốn giữ API của `next-intl` nhưng nhận đầu ra của Intlayer, adapter `@intlayer/next-intl` đo được **147.5 KB** mỗi trang so với **153.6 KB** của bản gốc.
 
 ## Tóm lược
 
@@ -89,6 +89,10 @@ Bộ công cụ ghi lại:
 
 ### Kết quả trên Next.js (App Router)
 
+Chọn các chỉ số và thư viện mà bạn quan tâm:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | Thư viện                            | Chiến lược     | Kích thước Lib (gz) | JS trang TB (gz) | Rò rỉ ngôn ngữ | Rò rỉ trang | TB component (gz) | Độ phản hồi E2E | Hydrate |
 | ----------------------------------- | -------------- | ------------------: | ---------------: | -------------: | ----------: | ----------------: | --------------: | ------: |
 | **Ứng dụng gốc** (không i18n)       | -              |              0.0 KB |         141.0 KB |           0.0% |        0.0% |            0.9 KB |         13.4 ms | 11.8 ms |
@@ -107,8 +111,19 @@ Bộ công cụ ghi lại:
 - **Rò rỉ nội dung.** Trong các cấu hình phổ biến (`static` và `dynamic`), `next-intl` gửi **~90% chuỗi của các trang khác** trên mỗi trang vì toàn bộ tệp `en.json` được đưa vào client provider. Để đạt mức 0% đòi hỏi phải chia tách thủ công rất tỉ mỉ, trong khi Intlayer đạt được điều này mặc định.
 - **Kích thước component.** Một component gọi `useTranslations()` có dung lượng trung bình 21.8 KB; cùng component đó với `useIntlayer()` chỉ nặng 6.9 KB.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Bảng đầy đủ, từng thư viện và từng chiến lược, trong [báo cáo benchmark Next.js](https://intlayer.org/vi/doc/benchmark/nextjs).
+
 ### Kết quả trên TanStack Start (`use-intl`)
 
+`use-intl` là lõi độc lập với framework của `next-intl`. Cùng API, cùng định dạng tin nhắn. So sánh nó với `intlayer` trên TanStack Start sẽ loại bỏ các phần đặc thù của Next.js khỏi phép so sánh.
+
 | Thư viện                           | Chiến lược     | Kích thước Lib (gz) | JS trang TB (gz) | Rò rỉ ngôn ngữ | Rò rỉ trang | TB component (gz) | Độ phản hồi E2E |
 | ---------------------------------- | -------------- | ------------------: | ---------------: | -------------: | ----------: | ----------------: | --------------: |
 | **Ứng dụng gốc** (không i18n)      | -              |              0.0 KB |         111.0 KB |           0.0% |        0.0% |            0.7 KB |          8.1 ms |
@@ -127,8 +142,19 @@ Bộ công cụ ghi lại:
 - Sự khác biệt về mặt kiến trúc thể hiện rất rõ ở **kích thước component**: 76-87 KB với `use-intl` so với 6-8 KB với Intlayer.
 - **Chuyển đổi ngôn ngữ** nhanh hơn từ 2 đến 4 lần với Intlayer (3 ms so với 7-21 ms).
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-tanstack.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Bảng đầy đủ trong [báo cáo benchmark TanStack Start](https://intlayer.org/vi/doc/benchmark/tanstack).
+
 ## Tại sao lại có sự khác biệt? Danh mục tập trung vs từ điển biên dịch
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 `next-intl` tuân theo mô hình cổ điển: một tệp JSON cho mỗi ngôn ngữ, được nạp trong `getRequestConfig`, chuyển vào `NextIntlClientProvider` và đọc qua cú pháp `t("namespace.key")`.
 
 ```bash
@@ -150,6 +176,10 @@ Bộ công cụ ghi lại:
 
 Runtime không thể biết trước những key nào sẽ được trang sử dụng, vì vậy việc gửi toàn bộ danh mục là giải pháp an toàn duy nhất.
 
+Chi phí của việc không đạt được điều đó tăng lên trên hai trục cùng một lúc, số trang và ngôn ngữ:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 Intlayer đảo ngược hoàn toàn quy trình này. Nội dung được khai báo trực tiếp cạnh component:
 
 ```bash
@@ -177,7 +207,8 @@ Tại thời điểm build, trình biên dịch nhận biết component nào imp
 
 ### Client component
 
-**next-intl**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-intl" value="next-intl">
 
 ```json fileName="messages/en.json"
 {
@@ -188,7 +219,7 @@ Tại thời điểm build, trình biên dịch nhận biết component nào imp
 }
 ```
 
-```tsx fileName="src/components/Counter.tsx"
+```tsx fileName="src/components/ClientCounter.tsx"
 "use client";
 
 import { useState } from "react";
@@ -210,7 +241,10 @@ export const Counter = () => {
 };
 ```
 
-**Intlayer**
+> Hãy nhớ bao gồm namespace `counter` trong các tin nhắn được truyền tới `NextIntlClientProvider` trên mỗi trang hiển thị component này.
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/components/Counter/index.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -249,11 +283,16 @@ export const Counter = () => {
 };
 ```
 
+Không có gì cần đăng ký trên trang: component tự mang theo nội dung của riêng nó.
+
+</Tab>
+</Tabs>
 ### Component server đồng bộ
 
 Các thành phần giao diện chung (navbar, footer, thẻ) thường là các component server được kết xuất dưới dạng con của component client, do đó chúng không thể là `async`.
 
-**next-intl**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-intl" value="next-intl">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 type ServerCounterProps = {
@@ -269,7 +308,10 @@ export const ServerCounter = ({ t, formattedCount }: ServerCounterProps) => (
 );
 ```
 
-**Intlayer**
+Trang phải gọi `await getTranslations("counter")` và `await getFormatter()`, sau đó truyền kết quả xuống dưới dạng props. Component không còn độc lập nữa.
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 import { useIntlayer } from "next-intlayer/server";
@@ -288,9 +330,12 @@ export const ServerCounter = ({ count }: { count: number }) => {
 };
 ```
 
+</Tab>
+</Tabs>
 ### Metadata
 
-**next-intl**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-intl" value="next-intl">
 
 ```tsx fileName="src/app/[locale]/about/page.tsx"
 import type { Metadata } from "next";
@@ -323,7 +368,8 @@ export const generateMetadata = async ({
 };
 ```
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```tsx fileName="src/app/[locale]/about/page.tsx"
 import { getIntlayer, getMultilingualUrls } from "intlayer";
@@ -347,6 +393,9 @@ export const generateMetadata = async ({
 };
 ```
 
+</Tab>
+</Tabs>
+
 ## Giữ lại API next-intl, tận dụng hiệu năng Intlayer
 
 Bạn không cần viết lại toàn bộ component để có được kết quả hiệu năng vượt trội như trên. Gói `@intlayer/next-intl` là một adapter tương thích trực tiếp: nó giữ lại `useTranslations`, `getTranslations`, `useFormatter`, `t.rich()` và các dạng số nhiều ICU, đồng thời phân phối chúng từ các từ điển Intlayer được biên dịch bởi trình biên dịch Intlayer.
@@ -368,17 +417,84 @@ Xem thêm [hướng dẫn chuyển đổi next-intl](https://intlayer.org/vi/doc
 
 ## Khi nào nên chọn thư viện nào?
 
-- **Chọn next-intl** nếu bạn muốn tiêu chuẩn phổ biến trong cộng đồng Next.js, phụ thuộc nhiều vào ICU MessageFormat, ứng dụng có quy mô vừa và nhỏ, hoặc đang tích hợp với các nền tảng dịch thuật tập trung (Crowdin, Phrase, Lokalise...).
-- **Chọn Intlayer** nếu bạn muốn **nội dung theo phạm vi component**, **TypeScript nghiêm ngặt**, **báo lỗi thiếu khóa ngay khi build**, **tự động tree-shaking và lazy loading không cần cấu hình**, component server đồng bộ, và bộ công cụ chỉnh sửa tích hợp sẵn (Visual Editor, CMS, dịch thuật AI, máy chủ MCP).
-- **Chọn `@intlayer/next-intl`** nếu bạn đã dùng `next-intl` và muốn tối ưu dung lượng bundle mà không cần viết lại mã nguồn.
+<AccordionGroup>
+<Accordion header="Chọn next-intl">
+
+Bạn muốn tiêu chuẩn của hệ sinh thái cho Next.js, dựa vào ICU MessageFormat, ứng dụng của bạn có quy mô vừa và nhỏ, hoặc bạn tích hợp với nền tảng dịch thuật (Crowdin, Phrase, Lokalise...) yêu cầu JSON tập trung. Hãy dành thời gian để phân chia danh mục thành các namespace và chọn thông điệp bằng `pick()` cho từng trang nếu hiệu năng là yếu tố quan trọng.
+
+</Accordion>
+<Accordion header="Chọn Intlayer">
+
+Bạn muốn **nội dung theo phạm vi component**, **TypeScript chặt chẽ**, **lỗi thiếu khóa trong quá trình build**, **tree-shaking và tải chậm (lazy loading) hoàn toàn tự động**, server component đồng bộ và các công cụ biên tập tích hợp sẵn ([Visual Editor](https://intlayer.org/vi/doc/concept/editor), [CMS](https://intlayer.org/vi/doc/concept/cms), [dịch thuật AI](https://intlayer.org/vi/doc/concept/auto-fill), [máy chủ MCP](https://intlayer.org/vi/doc/mcp-server)). Đặc biệt phù hợp cho các codebase mô-đun lớn và design system.
+
+</Accordion>
+<Accordion header="Chọn @intlayer/next-intl">
+
+Bạn đã sử dụng `next-intl` và muốn tối ưu kích thước bundle mà không cần viết lại toàn bộ mã nguồn. [Adapter tương thích](https://intlayer.org/vi/doc/compatibility/next-intl) giữ nguyên các import và tệp `messages/{locale}.json` của bạn làm nguồn chân lý duy nhất. Được đo lường cạnh nhau trong [next-intl vs @intlayer/next-intl](https://intlayer.org/vi/blog/next-intl-vs-intlayer-next-intl).
+
+</Accordion>
+</AccordionGroup>
+
+## Câu hỏi thường gặp (FAQ)
+
+<FAQ>
+
+<Question title="next-intl có chậm hơn Intlayer không?">
+
+Không phải ở thời gian render. Sự khác biệt nằm ở lượng dữ liệu gửi về trình duyệt: `next-intl` tiêu tốn **+12.6 KB gzip** runtime trên mỗi trang và trong hầu hết các cấu hình phổ biến sẽ gửi ~90% chuỗi ký tự của các trang khác kèm theo mỗi trang. Thời gian chuyển đổi ngôn ngữ và hydration tương đương nhau trên Next.js (15-18 ms); trên TanStack Start, `use-intl` mất 7-21 ms so với 3-4 ms của Intlayer.
+
+</Question>
+
+<Question title="Tôi có thể đạt 0% rò rỉ nội dung với next-intl không?">
+
+Có thể, với cấu hình `scoped-dynamic`: chia `messages/{locale}.json` thành một namespace cho mỗi route, sau đó dùng `pick(messages, [...])` ở mỗi trang và duy trì sự khớp nối đó khi các component thay đổi. Các hàng `scoped-*` trong benchmark chính là phản ánh công việc này. Intlayer đạt 0% mặc định mà không cần làm gì thêm vì compiler tự động giới hạn phạm vi nội dung theo từng component. Xem thêm [tối ưu hóa bundle](https://intlayer.org/vi/doc/concept/bundle-optimization).
+
+</Question>
+
+<Question title="Tôi có phải viết lại các component để di chuyển không?">
+
+Không. `@intlayer/next-intl` giữ nguyên `useTranslations`, `getTranslations`, `useFormatter`, `t.rich()`, số nhiều ICU và các navigation helper, đồng thời phục vụ chúng từ các từ điển đã biên dịch. Chỉ cần một dòng plugin trong `next.config.ts`. Chi tiết từng bước trong [hướng dẫn di chuyển next-intl](https://intlayer.org/vi/doc/migration/next-intl).
+
+</Question>
+
+<Question title="Intlayer có hỗ trợ ICU MessageFormat không?">
+
+Hỗ trợ ICU đang được hoàn thiện trên API gốc. Các adapter tương thích (`@intlayer/next-intl`, `@intlayer/use-intl`) đã hỗ trợ đầy đủ ICU: số nhiều, `select`, `selectordinal`, `#` và `{ts, date, long}` đều đi qua bộ phân giải ICU của Intlayer. Xem thêm [định dạng tin nhắn ICU](https://intlayer.org/vi/blog/icu-message-format).
+
+</Question>
+
+<Question title="Tôi có thể giữ lại các tệp messages/{locale}.json không?">
+
+Có. [Plugin đồng bộ JSON](https://intlayer.org/vi/doc/compatibility/next-intl) sẽ đọc chúng, chia các khóa cấp cao nhất thành từ điển và ghi lại các bản dịch vào chính các tệp đó khi CLI hoặc CMS cập nhật. Quy trình làm việc của đội ngũ dịch thuật hoàn toàn không bị ảnh hưởng.
+
+</Question>
+
+</FAQ>
 
 ## So sánh liên quan
 
-- [i18next vs Intlayer](https://intlayer.org/vi/blog/i18next-vs-intlayer) (cùng bài kiểm tra)
-- [Lingui vs Intlayer](https://intlayer.org/vi/blog/lingui-vs-intlayer) (cùng bài kiểm tra)
-- [Điểm chuẩn vue-i18n vs Intlayer](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-benchmark) (cùng bài kiểm tra)
+Cùng bài benchmark, các thư viện khác:
+
+- [i18next vs Intlayer](https://intlayer.org/vi/blog/i18next-vs-intlayer)
+- [Lingui vs Intlayer](https://intlayer.org/vi/blog/lingui-vs-intlayer)
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-benchmark)
 - [next-i18next vs next-intl vs Intlayer](https://intlayer.org/vi/blog/next-i18next-vs-next-intl-vs-intlayer)
-- [next-intl có lỗi thời không?](https://intlayer.org/vi/blog/is-next-intl-outdated)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/vi/blog/react-i18next-vs-react-intl-vs-intlayer)
+
+Tìm hiểu sâu hơn về next-intl:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/vi/blog/next-intl-vs-intlayer-next-intl), adapter được đo lường trên cùng một ứng dụng
+- [Is next-intl outdated?](https://intlayer.org/vi/blog/is-next-intl-outdated)
+- [Using Intlayer with next-intl](https://intlayer.org/vi/blog/intlayer-with-next-intl)
+- [How to internationalize a Next.js app with next-intl](https://intlayer.org/vi/blog/nextjs-internationalization-using-next-intl)
+
+Tài liệu tham khảo:
+
+- [Báo cáo benchmark Next.js](https://intlayer.org/vi/doc/benchmark/nextjs) và [báo cáo benchmark TanStack Start](https://intlayer.org/vi/doc/benchmark/tanstack)
+- [Adapter tương thích: next-intl](https://intlayer.org/vi/doc/compatibility/next-intl) và [hướng dẫn di chuyển](https://intlayer.org/vi/doc/migration/next-intl)
+- [Tối ưu hóa bundle](https://intlayer.org/vi/doc/concept/bundle-optimization) và [Intlayer compiler](https://intlayer.org/vi/doc/compiler)
+- [i18n theo component vs i18n tập trung](https://intlayer.org/vi/blog/per-component-vs-centralized-i18n)
+- [i18n dựa trên compiler vs khai báo](https://intlayer.org/vi/blog/compiler-vs-declarative-i18n)
 
 ## Ngôi sao GitHub