@intlayer/docs 9.4.2 → 9.4.3

package/blog/vi/is_next-intl_outdated.md

@@ -0,0 +1,363 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: Liệu next-intl Đã Lỗi Thời Vào Năm 2026?
+description: next-intl đã trở thành lựa chọn phổ biến cho Next.js App Router. Nhưng nó vẫn mang gánh nặng bundle lúc runtime và yêu cầu quản lý namespace thủ công.
+keywords:
+  - next-intl
+  - Intlayer
+  - Quốc tế hóa
+  - i18n
+  - Next.js
+  - Dung lượng bundle
+  - Blog
+  - JavaScript
+slugs:
+  - blog
+  - is-next-intl-outdated
+author: aymericzip
+---
+
+# Liệu next-intl Đã Lỗi Thời Vào Năm 2026?
+
+Khi Vercel giới thiệu App Router và loại bỏ tính năng i18n tích hợp sẵn của Pages Router, `next-intl` đã nhanh chóng lấp đầy khoảng trống đó. Nhờ tài liệu rõ ràng của Jan Amann và khả năng hỗ trợ kịp thời cho App Router, thư viện này đã trở thành lựa chọn mặc định của cộng đồng.
+
+Vậy tại sao hôm nay chúng ta lại cần đặt câu hỏi về tính phù hợp của nó?
+
+**Bởi vì kiến trúc web đã có những bước tiến vượt bậc trong 3 năm qua, nhưng mô hình cốt lõi của `next-intl` phần lớn vẫn dậm chân tại chỗ.**
+
+Trong khi Next.js chuyển hướng sang React Server Components (RSC), streaming và tối ưu hóa cấp trình biên dịch, `next-intl` vẫn tiếp tục xử lý việc quốc tế hóa như một tác vụ runtime: truyền các đối tượng JSON lớn qua client provider, chạy các hàm định dạng ICU trong trình duyệt và phụ thuộc vào việc chia nhỏ namespace thủ công để hạn chế dung lượng bundle.
+
+<TOC/>
+
+## Điểm Nhấn Chính
+
+**Tốc độ phát triển chậm lại:**
+
+Trong 12 tháng qua, `next-intl` ghi nhận khoảng 187 commit, chủ yếu tập trung vào việc tương thích các phiên bản Next.js và vá lỗi nhỏ.
+
+**Gánh nặng runtime phía client:**
+
+Việc gắn `NextIntlClientProvider` kết hợp với `useTranslations()` sẽ bổ sung khoảng 12.8 KB gzipped (51 KB minified) trước khi hiển thị bất kỳ dòng chữ nào, gấp gần 3 lần so với `next-intlayer` (4.3 KB).
+
+**Tỷ lệ rò rỉ nội dung lên tới 90%:**
+
+Ở các thiết lập thông thường, **89.8% dữ liệu bản dịch gửi đến một trang thực chất thuộc về các route khác**. Truy cập vào `/contact` đồng nghĩa với việc trình duyệt phải tải luôn cả văn bản của `/pricing` và trang quản trị.
+
+**Gánh nặng quản lý namespace thủ công:**
+
+Để tránh phình to bundle, lập trình viên phải tự ánh xạ namespace theo từng route một cách thủ công, làm tăng nguy cơ thiếu sót bản dịch trên môi trường production.
+
+**Quan hệ đối tác thương mại:**
+
+Là đối tác chính thức của Crowdin, dự án không có nhiều động lực để xây dựng công cụ dịch thuật AI cục bộ hoàn toàn miễn phí trực tiếp trong CLI.
+
+## Bảo Trì vs. Công Cụ Hiện Đại
+
+Hoạt động commit trong 12 tháng qua:
+
+| Kho lưu trữ           | Lượt sao                                                                                                                                               | Tổng commit                                                                                                                                                         | Commit / năm                                                                                                                                                       | Commit gần nhất                                                                                                                              |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `amannn/next-intl`    | [![stars](https://img.shields.io/github/stars/amannn/next-intl?style=for-the-badge&label=stars)](https://github.com/amannn/next-intl/stargazers)       | [![commits](https://img.shields.io/github/commit-activity/t/amannn/next-intl?style=for-the-badge&label=commits)](https://github.com/amannn/next-intl/commits)       | [![yearly](https://img.shields.io/github/commit-activity/y/amannn/next-intl?style=for-the-badge&label=%2Fyear)](https://github.com/amannn/next-intl/commits)       | [![last](https://img.shields.io/github/last-commit/amannn/next-intl?style=for-the-badge)](https://github.com/amannn/next-intl/commits)       |
+| `aymericzip/intlayer` | [![stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=stars)](https://github.com/aymericzip/intlayer/stargazers) | [![commits](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits) | [![yearly](https://img.shields.io/github/commit-activity/y/aymericzip/intlayer?style=for-the-badge&label=%2Fyear)](https://github.com/aymericzip/intlayer/commits) | [![last](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits) |
+
+Tổng kết một năm qua:
+
+- `amannn/next-intl`: **187 commit** (chủ yếu là cập nhật phụ thuộc và vá lỗi nhỏ).
+- `aymericzip/intlayer`: **4.343 commit** (phát triển tích cực trên trình biên dịch, tiện ích mở rộng IDE, máy chủ MCP và công cụ dịch thuật AI).
+
+[![Star History Chart](https://api.star-history.com/chart?repos=amannn%2Fnext-intl%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#amannn/next-intl&aymericzip/intlayer)
+
+Một thư viện đã ổn định mang lại cảm giác an tâm. Tuy nhiên, tiêu chuẩn công cụ i18n đã thay đổi: trình biên dịch loại bỏ văn bản không dùng khi build, LLM dịch tự động trong CI, và lập trình viên được hỗ trợ bởi Language Server (LSP) cùng AI agent. Kiến trúc phụ thuộc hoàn toàn vào runtime khó có thể tận dụng những bước tiến này.
+
+## Đánh Giá Hiệu Năng Trên Next.js 16 App Router
+
+Thử nghiệm trên một ứng dụng App Router tiêu chuẩn gồm 10 route và 10 ngôn ngữ:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
+<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;"
+/>
+
+> Đo lường trên các trình duyệt thực tế với nén gzip ở môi trường production. Xem toàn bộ chi tiết trong [báo cáo benchmark Next.js](https://intlayer.org/vi/doc/benchmark/nextjs).
+
+### Dung Lượng Cơ Sở Của Thư Viện
+
+Dung lượng client trước khi thêm bất kỳ chuỗi dịch nào:
+
+| Thư viện               | Gzipped    | Minified    |
+| ---------------------- | ---------- | ----------- |
+| `next-intl@4.9.1`      | 12.8 KB    | 51.0 KB     |
+| `next-intlayer@8.7.12` | **4.3 KB** | **13.3 KB** |
+
+### Dung Lượng Trang Và Rò Rỉ Nội Dung
+
+| Cấu hình           | JS trung bình/trang (gz) | Rò rỉ ngôn ngữ | Rò rỉ trang khác | Component trung bình (gz) |
+| ------------------ | ------------------------ | -------------- | ---------------- | ------------------------- |
+| Gốc (không i18n)   | 150.8 KB                 | 0.0%           | 0.0%             | 0.7 KB                    |
+| `next-intl` (tĩnh) | 163.5 KB                 | 4.2%           | **89.8%**        | 20.5 KB                   |
+| `next-intl` (động) | 163.4 KB                 | 9.7%           | **89.9%**        | 20.5 KB                   |
+| `next-intlayer`    | **152.1 KB**             | **0.0%**       | **0.0%**         | **7.2 KB**                |
+
+### Nguyên Nhân Rò Rỉ Giữa Các Trang
+
+Trong các dự án `next-intl` thông thường, root layout sẽ lấy tất cả tin nhắn cùng một lúc:
+
+```tsx fileName="app/[locale]/layout.tsx"
+export default async function RootLayout({ children, params }) {
+  const messages = await getMessages();
+
+  return (
+    <html>
+      <body>
+        <NextIntlClientProvider messages={messages}>
+          {children}
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+Bởi vì `messages` được đưa vào client provider ở cấp cao nhất, trình duyệt buộc phải tải toàn bộ từ điển cho mỗi lần truy cập trang. Một người chỉ xem trang `/login` cũng phải tải luôn cả phần trợ giúp, điều khoản và bảng điều khiển.
+
+Có thể giảm bớt điều này bằng cách chia nhỏ file JSON thành các namespace. Tuy nhiên, việc tự quản lý ánh xạ này tốn nhiều công sức và rất dễ bỏ sót.
+
+Intlayer giải quyết vấn đề bằng phân tích tĩnh: [trình biên dịch Intlayer](https://intlayer.org/vi/doc/compiler) chỉ đóng gói những nội dung thực sự được gọi trên route đó, đưa tỷ lệ rò rỉ giữa các trang về mức **0.0%**.
+
+## Tại Sao next-intl Không Thể Tree-Shaking?
+
+Giao diện API của thư viện dựa trên việc tra cứu chuỗi khóa động trong quá trình chạy:
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="next-intl" value="next-intl">
+
+```tsx fileName="UserProfile.tsx"
+"use client";
+
+import { useTranslations } from "next-intl";
+
+export function UserProfile() {
+  const t = useTranslations("UserProfile");
+
+  return <h2>{t("heading")}</h2>;
+}
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```tsx fileName="UserProfile.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function UserProfile() {
+  const { heading } = useIntlayer("user-profile");
+
+  return <h2>{heading}</h2>;
+}
+```
+
+  </Tab>
+</Tabs>
+
+Turbopack và Webpack không thể dự đoán những khóa nào trong `UserProfile` sẽ được gọi. Nhằm tránh lỗi thiếu văn bản, **bundler buộc phải đưa toàn bộ namespace vào chunk client**. Ngược lại, cú pháp tách thuộc tính của Intlayer cho phép trình biên dịch kiểm tra chính xác các liên kết và loại bỏ văn bản không dùng. Xem thêm tại [tối ưu hóa bundle](https://intlayer.org/vi/doc/concept/bundle-optimization).
+
+## Trải Nghiệm Lập Trình Viên (DX)
+
+### JSON Riêng Biệt vs. Đặt Cùng Component
+
+Với `next-intl`, các chuỗi văn bản nằm ở thư mục `messages/` tách biệt khỏi mã nguồn. Intlayer hỗ trợ đặt các file khai báo nội dung ngay bên cạnh component:
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="next-intl" value="next-intl">
+
+```json fileName="messages/en.json"
+{
+  "authModal": {
+    "title": "Sign in to your account",
+    "submitButton": "Continue"
+  }
+}
+```
+
+```json fileName="messages/vi.json"
+{
+  "authModal": {
+    "title": "Đăng nhập vào tài khoản của bạn",
+    "submitButton": "Tiếp tục"
+  }
+}
+```
+
+```tsx fileName="AuthModal.tsx"
+import { useTranslations } from "next-intl";
+
+export const AuthModal = () => {
+  const t = useTranslations("authModal");
+  return (
+    <form>
+      <h2>{t("title")}</h2>
+      <button type="submit">{t("submitButton")}</button>
+    </form>
+  );
+};
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```ts fileName="AuthModal.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "auth-modal",
+  content: {
+    title: t({
+      en: "Sign in to your account",
+      vi: "Đăng nhập vào tài khoản của bạn",
+    }),
+    submitButton: t({
+      en: "Continue",
+      vi: "Tiếp tục",
+    }),
+  },
+} satisfies Dictionary;
+```
+
+```tsx fileName="AuthModal.tsx"
+import { useIntlayer } from "next-intlayer";
+
+export const AuthModal = () => {
+  const { title, submitButton } = useIntlayer("auth-modal");
+  return (
+    <form>
+      <h2>{title}</h2>
+      <button type="submit">{submitButton}</button>
+    </form>
+  );
+};
+```
+
+  </Tab>
+</Tabs>
+
+Khi di chuyển hoặc xóa `AuthModal.tsx`, file nội dung đi kèm cũng tự động được chuyển đổi hoặc xóa bỏ tương ứng.
+
+### Gợi Ý Code vs. Kiểm Tra Kiểu Chặt Chẽ
+
+Định nghĩa `IntlMessages` trong `next-intl` mang lại gợi ý tự động dựa trên ngôn ngữ mặc định:
+
+```ts fileName="global.d.ts"
+import en from "./messages/en.json";
+
+type Messages = typeof en;
+
+declare global {
+  interface IntlMessages extends Messages {}
+}
+```
+
+Tuy nhiên cơ chế này chỉ kiểm tra ngôn ngữ cơ sở. Nếu một khóa bị xóa khỏi `vi.json`, TypeScript sẽ không báo lỗi, tiến trình CI vẫn vượt qua và người dùng thực tế sẽ thấy khoảng trống.
+
+Intlayer tạo kiểu dữ liệu trực tiếp từ tất cả các file khai báo nội dung. Khi bật chế độ [`strictMode`](https://intlayer.org/vi/doc/concept/configuration), bất kỳ bản dịch nào bị thiếu ở bất kỳ ngôn ngữ nào đều khiến quá trình build dừng lại ngay lập tức.
+
+### Hệ Thống Công Cụ Và Trợ Lý AI
+
+| Tính năng                   | `next-intl` | Intlayer                                                                 |
+| --------------------------- | ----------- | ------------------------------------------------------------------------ |
+| **VS Code Extension**       | ❌ Không có | ✅ [Extension chính thức](https://intlayer.org/vi/doc/vs-code-extension) |
+| **Language Server (LSP)**   | ❌ Không có | ✅ [LSP chuyên dụng](https://intlayer.org/vi/doc/lsp)                    |
+| **MCP Server cho AI Agent** | ❌ Không có | ✅ [Tích hợp sẵn MCP server](https://intlayer.org/vi/doc/mcp-server)     |
+| **Kỹ năng cho Agent**       | ❌ Không có | ✅ [Kỹ năng thiết lập sẵn](https://intlayer.org/vi/doc/agent_skills)     |
+| **CMS Trực Quan**           | ❌ Không có | ✅ [Miễn phí & Mã nguồn mở](https://intlayer.org/vi/doc/concept/editor)  |
+
+Các máy chủ LSP và MCP giúp các trợ lý lập trình AI hiểu sâu sắc cấu trúc dịch thuật của dự án và đưa ra đề xuất chuẩn xác.
+
+## Mối Quan Hệ Với Crowdin
+
+`next-intl` có quan hệ đối tác chính thức với Crowdin. Sự tài trợ luôn có ích cho mã nguồn mở, nhưng cũng định hình định hướng phát triển: được xây dựng như một client cho các hệ thống TMS thương mại, `next-intl` ít có động lực để cung cấp tính năng dịch AI cục bộ miễn phí ngay trong CLI.
+
+Intlayer cung cấp các khả năng này theo mặc định:
+
+**Tự Động Điền Bằng AI Cục Bộ (`intlayer fill`):**
+
+Tìm và dịch các khóa còn thiếu bằng chính khóa API OpenAI, Anthropic, Mistral hoặc Gemini của bạn.
+
+**CMS Trực Quan Tự Host:**
+
+Sử dụng [Intlayer CMS](https://intlayer.org/vi/doc/concept/cms) để những người không rành kỹ thuật có thể chỉnh sửa nội dung trực tiếp trên web và lưu vào Git.
+
+**Bản Quyền Mã Nguồn Mở Tự Do:**
+
+Toàn bộ hệ thống được cấp phép theo Apache 2.0.
+
+## Khi Nào next-intl Vẫn Là Lựa Chọn Thích Hợp?
+
+<AccordionGroup>
+<Accordion header="Yêu cầu cao về cú pháp ICU MessageFormat">
+
+Nếu ứng dụng của bạn dựa nhiều vào các định dạng phân nhánh phức tạp, động cơ ICU của `next-intl` là một lựa chọn vững chắc.
+
+</Accordion>
+<Accordion header="Quy trình dịch thuật hiện có dựa trên Crowdin">
+
+Đối với các nhóm đã vận hành việc biên dịch hoàn toàn qua nền tảng Crowdin, `next-intl` kết nối rất mượt mà.
+
+</Accordion>
+<Accordion header="Hệ thống đang chạy ổn định">
+
+Nếu ứng dụng hiện tại đáp ứng tốt nhu cầu và dung lượng bundle không gây cản trở, bạn không cần thiết phải chuyển đổi.
+
+</Accordion>
+</AccordionGroup>
+
+## Làm Thế Nào Để Cải Thiện Cấu Hình next-intl Hiện Tại?
+
+Intlayer cung cấp gói tương thích trực tiếp giúp tái tạo chính xác các signature hàm và hook của `next-intl` (như `useTranslations`, `getTranslations` cùng các helper định tuyến). Bạn không cần viết lại trang hay component mà vẫn có thể tận dụng lợi thế của quy trình tối ưu cấp trình biên dịch.
+
+Thiết lập chỉ với một dòng lệnh duy nhất:
+
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer init --interactive
+```
+
+Công cụ CLI tương tác này sẽ tự động:
+
+1. Cài đặt gói tương thích `@intlayer/next-intl`.
+2. Cấu hình alias trong bundler để các lệnh import hiện tại (`next-intl`, `next-intl/server`) trỏ thẳng tới Intlayer, cho phép bạn gỡ bỏ thư viện cũ khỏi `package.json`.
+3. Kích hoạt ngay chẩn đoán Language Server (LSP) trong trình soạn thảo, loại bỏ triệt để rò rỉ dữ liệu giữa các trang (tree-shaking hoàn chỉnh) và hỗ trợ quy trình dịch AI cục bộ mà không cần tái cấu trúc phức tạp.
+
+Để xem hướng dẫn chi tiết từng bước, hãy tham khảo các tài liệu chuyên sâu:
+
+- **Tương thích tức thì:** Tiếp tục sử dụng các lệnh gọi `useTranslations` hiện tại thông qua [tầng tương thích next-intl](https://intlayer.org/vi/doc/compatibility/next-intl).
+- **Hướng dẫn chuyển đổi:** Chuyển đổi file JSON cũ sang từ điển định kiểu với [hướng dẫn chuyển đổi next-intl](https://intlayer.org/vi/doc/migration/next-intl).
+- **Mô hình kết hợp:** Giữ nguyên `next-intl` cho việc hiển thị trong khi [kết hợp Intlayer với next-intl](https://intlayer.org/vi/blog/intlayer-with-next-intl) để hưởng lợi từ dịch thuật AI cục bộ.
+
+Đo lường dung lượng bundle và độ rò rỉ của trang web với [công cụ quét SEO i18n miễn phí](https://intlayer.org/i18n-seo-scanner):
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+## Bài Viết Đề Xuất
+
+- [Next.js i18n Benchmark: Đánh Giá Hiệu Năng Chi Tiết](https://intlayer.org/vi/doc/benchmark/nextjs)
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/vi/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [Liệu i18next Đã Lỗi Thời Vào Năm 2026?](https://intlayer.org/vi/blog/is-i18next-outdated)
+- [Lợi Thế Của Quốc Tế Hóa Dựa Trên Trình Biên Dịch](https://intlayer.org/vi/blog/compiler-vs-declarative-i18n)