@intlayer/docs 9.4.3 → 9.5.0

package/blog/vi/transform_existing_nextjs_app_using_compiler.md

@@ -0,0 +1,293 @@
+---
+createdAt: 2026-01-10
+updatedAt: 2026-09-06
+title: "Cách làm đa ngôn ngữ (i18n) cho ứng dụng Next.js hiện có sau này (Hướng dẫn i18n 2026)"
+description: "Hướng dẫn năm 2026 về cách thêm đa ngôn ngữ (i18n) vào ứng dụng Next.js hiện có mà không cần tái cấu trúc phức tạp. Trích xuất tự động, dịch thuật bằng AI và định tuyến hiệu năng cao với Intlayer."
+keywords:
+  - Next.js i18n
+  - Quốc tế hóa
+  - Dịch ứng dụng Next.js hiện có
+  - Next.js 16
+  - Intlayer
+  - Đa ngôn ngữ
+  - React i18n
+  - Trình biên dịch
+  - Dịch thuật AI
+  - SEO
+slugs:
+  - blog
+  - transform-existing-nextjs-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-next-no-lolale-path-template
+youtubeVideo: https://www.youtube.com/watch?v=e_PPG7PTqGU
+history:
+  - version: 9.4.0
+    date: 2026-08-22
+    changes: "Update to Next.js >= 9.4.0 architecture"
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# Cách làm đa ngôn ngữ (i18n) cho ứng dụng Next.js hiện có sau này (Hướng dẫn i18n 2026)
+
+Thêm quốc tế hóa (i18n) vào dự án Next.js ngay từ đầu khá đơn giản. Nhưng điều gì sẽ xảy ra khi bạn đã có một ứng dụng Next.js hoàn thiện đang hoạt động chỉ với một ngôn ngữ và cần hỗ trợ đa ngôn ngữ **sau đó**?
+
+Với các thư viện truyền thống như `next-intl` hoặc `next-i18next`, đây là một cơn ác mộng:
+
+- Tìm kiếm thủ công các chuỗi văn bản cố định trong hàng trăm tệp JSX/TSX.
+- Tạo thủ công các tệp JSON lồng nhau và tự đặt tên khóa dịch (`pages.dashboard.header.title`).
+- Thay thế văn bản bằng các hook dịch thuật (`t('...')`).
+- Tái cấu trúc toàn bộ thư mục `app/` thành `app/[locale]/...`, làm hỏng các URL hiện tại và chỉ mục tìm kiếm.
+
+Vào năm 2026, bạn không cần phải viết lại mã nguồn của mình. Với **Intlayer**, bạn có thể bổ sung đa ngôn ngữ cho ứng dụng Next.js hiện có chỉ trong vài phút nhờ trích xuất tự động, dịch thuật AI và định tuyến linh hoạt.
+
+> Bạn đang tìm kiếm hướng dẫn kỹ thuật chi tiết từng bước cho Next.js 16 App Router? Xem tài liệu của chúng tôi: [Dịch Next.js 16 với Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nextjs_16.md).
+
+## Mục lục
+
+<TOC/>
+
+## Thách thức khi bổ sung i18n vào ứng dụng hiện có
+
+Ba trở ngại lớn:
+
+1. **Xáo trộn mã nguồn**: Trích xuất thủ công đòi hỏi phải sửa đổi hầu hết các tệp thành phần.
+2. **Ràng buộc định tuyến**: Thư viện cũ buộc phải chuyển trang vào thư mục động `[locale]`.
+3. **Công việc dịch thuật tốn thời gian**: Sao chép và dịch hàng trăm chuỗi sang nhiều ngôn ngữ.
+
+Intlayer giải quyết vấn đề bằng **trình biên dịch trích xuất thông minh**, **từ điển khai báo** và **định tuyến linh hoạt**.
+
+## Trích xuất nội dung tự động (Không cần tìm kiếm thủ công)
+
+### Tùy chọn A: Công cụ CLI trích xuất (`npx intlayer extract`)
+
+Chạy trực tiếp công cụ trích xuất của Intlayer trong dự án:
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+Lệnh này sẽ phân tích các thành phần React và tạo tệp khai báo (`.content.ts`) ngay bên cạnh thành phần.
+
+### Tùy chọn B: Trình biên dịch Intlayer (Trích xuất khi build)
+
+Tiếp tục viết văn bản bình thường trong thành phần. Khi build, trình biên dịch sẽ tự động trích xuất và liên kết nội dung đã dịch:
+
+```tsx fileName="src/app/page.tsx"
+// Write normal React code. The compiler extracts the text automatically
+export default function HomePage() {
+  return (
+    <section>
+      <h1>Welcome to our platform</h1>
+      <p>Start exploring our modern features today.</p>
+    </section>
+  );
+}
+```
+
+Ở chế độ nền, Intlayer xây dựng từ điển và liên kết thành phần với nội dung được bản địa hóa, loại bỏ hoàn toàn bước tái cấu trúc thủ công.
+
+Trong trường hợp này, tệp `src/app/page.content.ts` sẽ được tạo với nội dung sau:
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({ en: "Welcome to our platform" }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## Dịch thuật bằng AI với LLM yêu thích của bạn
+
+Dịch nội dung trong vài giây bằng OpenAI, Anthropic, DeepSeek hoặc Mistral:
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.GERMAN],
+    defaultLocale: Locales.ENGLISH,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext: "Bảng điều khiển SaaS cho năng suất và cộng tác nhóm",
+  },
+};
+
+export default config;
+```
+
+Chạy lệnh `npx intlayer fill` sẽ tự động điền các bản dịch cho tất cả ngôn ngữ đã cấu hình vào tệp `.content.ts` của bạn:
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+      vi: "Chào mừng đến với nền tảng của chúng tôi",
+    }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+      vi: "Bắt đầu khám phá các tính năng hiện đại ngay hôm nay.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Vì Intlayer cung cấp `applicationContext` cấp cao cho LLM, các bản dịch được tạo ra sẽ giữ được sắc thái kỹ thuật, phong cách thương hiệu và ngữ cảnh ngữ pháp tốt hơn nhiều so với các công cụ dịch tự động truyền thống.
+
+Để kiểm tra xem không có chuỗi nào bị bỏ sót trước khi triển khai lên production:
+
+```bash
+npx intlayer test
+```
+
+## Định tuyến đa ngôn ngữ không làm hỏng URL hiện tại
+
+Intlayer hỗ trợ nhiều chiến lược:
+
+- **Chế độ tham số / Cookie (`search-params`)**: Giữ nguyên cấu trúc thư mục mà không cần chuyển vào `[locale]`.
+- **Chế độ tiền tố (`prefix` / `prefix-all-locales`)**: Hỗ trợ URL thân thiện với SEO thông qua proxy.
+
+Định cấu hình tích hợp Next.js của bạn chỉ trong vài giây:
+
+```typescript fileName="next.config.ts"
+import type { NextConfig } from "next";
+import { withIntlayer } from "next-intlayer/server";
+
+const nextConfig: NextConfig = {/* Your existing Next.js config */};
+
+export default withIntlayer(nextConfig);
+```
+
+Bọc layout gốc của bạn bằng `IntlayerProvider` :
+
+```tsx fileName="src/app/layout.tsx"
+import type { ReactNode } from "react";
+import { IntlayerProvider } from "next-intlayer";
+import { getLocale } from "next-intlayer/server";
+import { getHTMLTextDir } from "intlayer";
+
+export default async function RootLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const locale = await getLocale();
+
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <body>
+        <IntlayerProvider defaultLocale={locale}>{children}</IntlayerProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+## SEO đa ngôn ngữ
+
+Tự động tạo siêu dữ liệu và thẻ `hreflang` để tối ưu khả năng tìm kiếm toàn cầu:
+
+```tsx fileName="src/app/page.tsx"
+import type { Metadata } from "next";
+import { getLocale } from "next-intlayer/server";
+import { getIntlayer } from "intlayer";
+
+export const generateMetadata = async (): Promise<Metadata> => {
+  const locale = await getLocale();
+  const content = getIntlayer("home-page-metadata", locale);
+
+  return {
+    title: content.title,
+    description: content.description,
+  };
+};
+```
+
+## Tìm hiểu thêm: Sẵn sàng cho hướng dẫn từng bước?
+
+Để xem hướng dẫn kỹ thuật chi tiết với middleware, SSG (`generateStaticParams`) và Server Components, vui lòng truy cập tài liệu chính thức:
+
+👉 **[Hướng dẫn toàn diện dịch Next.js 16 với Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nextjs_16.md)**
+
+## Câu hỏi thường gặp (FAQ)
+
+<FAQ>
+
+<Question title="Tôi có thể hỗ trợ đa ngôn ngữ mà không cần chuyển tệp vào app/[locale] không?">
+
+Có. Intlayer hỗ trợ `routing.mode: "search-params"` và phát hiện qua cookie/header mà không thay đổi cấu trúc thư mục.
+
+</Question>
+<Question title="Tôi có phải thay thế thủ công toàn bộ chuỗi văn bản không?">
+
+Không. Sử dụng `npx intlayer extract` hoặc trình biên dịch Intlayer để tự động trích xuất.
+
+</Question>
+<Question title="Intlayer giảm kích thước gói so với next-intl như thế nào?">
+
+Nhờ khai báo từ điển theo thành phần và tối ưu hóa macro lúc biên dịch.
+
+</Question>
+<Question title="Tôi có thể dùng AI để tự động dịch các thành phần hiện có không?">
+
+Có. Lệnh `npx intlayer fill` kết nối với các mô hình AI để dịch thuật chính xác theo ngữ cảnh.
+
+</Question>
+</FAQ>

package/blog/vi/transform_existing_vite_react_app_using_compiler.md

@@ -0,0 +1,358 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2026-09-06
+title: "Cách làm đa ngôn ngữ (i18n) cho ứng dụng Vite và React hiện có sau này (Hướng dẫn i18n 2026)"
+description: "Hướng dẫn năm 2026 về cách thêm đa ngôn ngữ (i18n) vào ứng dụng Vite và React hiện có mà không cần tái cấu trúc phức tạp. Trích xuất tự động, dịch thuật bằng AI và tối ưu hóa bundle với Intlayer."
+keywords:
+  - Vite i18n
+  - React i18n
+  - Quốc tế hóa
+  - Dịch ứng dụng Vite hiện có
+  - Dịch ứng dụng React hiện có
+  - Intlayer
+  - Đa ngôn ngữ
+  - Trình biên dịch
+  - Dịch thuật AI
+  - SEO
+slugs:
+  - blog
+  - transform-existing-react-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+applicationShowcase: https://intlayer-vite-react-template.vercel.app
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# Cách làm đa ngôn ngữ (i18n) cho ứng dụng Vite và React hiện có sau này (Hướng dẫn i18n 2026)
+
+Thêm quốc tế hóa (i18n) vào dự án Vite và React ngay từ đầu khá đơn giản. Nhưng điều gì sẽ xảy ra khi bạn đã có một ứng dụng hoàn thiện đang hoạt động chỉ với một ngôn ngữ và cần hỗ trợ đa ngôn ngữ **sau đó**?
+
+Với các thư viện truyền thống như `react-i18next` hoặc `react-intl`, quá trình này thường rất mệt mỏi:
+
+- Tìm kiếm thủ công các chuỗi văn bản cố định trong hàng trăm tệp JSX và TSX.
+- Tạo thủ công các tệp JSON lồng nhau và tự đặt tên khóa dịch tùy ý (`components.header.title`, v.v.).
+- Thay thế văn bản giao diện bằng các lệnh gọi hook rườm rà (`t('...')`).
+- Tái cấu trúc định tuyến phía client, quản lý trạng thái và logic chuyển đổi ngôn ngữ.
+
+Vào năm 2026, bạn không cần phải viết lại mã nguồn của mình. Với **Intlayer**, bạn có thể tích hợp quốc tế hóa vào ứng dụng Vite và React hiện có chỉ trong vài phút nhờ khả năng trích xuất tự động, dịch thuật bằng AI và tích hợp mượt mà vào Vite.
+
+> Bạn đang tìm kiếm hướng dẫn kỹ thuật chi tiết từng bước cho Vite và React? Xem tài liệu chuyên sâu của chúng tôi: [Dịch Vite và React với Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+react.md).
+
+## Mục lục
+
+<TOC/>
+
+## Thách thức khi bổ sung i18n vào ứng dụng hiện có
+
+Khi quốc tế hóa một ứng dụng Vite và React hiện có, các nhà phát triển phải đối mặt với ba rào cản lớn:
+
+1. **Xáo trộn mã nguồn**: Trích xuất thủ công các chuỗi sang từ điển JSON đòi hỏi phải chỉnh sửa hầu hết mọi tệp component. Điều này tạo ra diff git khổng lồ, rủi ro xung đột khi merge và nguy cơ lỗi giao diện.
+2. **Gánh nặng quản lý khóa**: Việc nghĩ ra các khóa như `dashboard.hero.ctaButton` cho từng đoạn văn bản làm chậm tốc độ phát triển và tạo áp lực mỗi khi thay đổi nội dung.
+3. **Công việc dịch thuật tẻ nhạt**: Khi các chuỗi đã được tách ra, việc điền từ điển cho 5, 10 hoặc 20 ngôn ngữ đòi hỏi sao chép - dán vô tận hoặc thuê các dịch vụ dịch thuật bên ngoài đắt đỏ.
+
+Intlayer giải quyết tận gốc các khó khăn này thông qua **trích xuất có sự hỗ trợ của trình biên dịch**, **từ điển khai báo ở cấp component** và **tích hợp trực tiếp vào Vite**.
+
+## Trích xuất nội dung tự động (không cần tìm chuỗi thủ công)
+
+Thay vì phải tự tay sao chép từng chuỗi từ JSX của bạn, Intlayer cung cấp hai hướng tiếp cận dễ dàng:
+
+### Lựa chọn A: Công cụ trích xuất CLI (`npx intlayer extract`)
+
+Bạn có thể chạy công cụ trích xuất của Intlayer trực tiếp trên mã nguồn của dự án:
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+Lệnh này phân tích các component React của bạn, phát hiện văn bản hiển thị cho người dùng và tự động tạo các tệp khai báo nội dung (`.content.ts`) ngay cạnh mỗi component. Logic component vẫn giữ tính khai báo, rõ ràng và an toàn kiểu dữ liệu mà không cần phải đặt bất kỳ khóa dịch nào.
+
+### Lựa chọn B: Trình biên dịch Intlayer (Trích xuất trong quá trình build)
+
+Khi bật trình biên dịch Intlayer trong cấu hình, bạn có thể tiếp tục viết component bằng văn bản thông thường bằng ngôn ngữ mặc định. Khi build, trình biên dịch sẽ tự động trích xuất văn bản và chèn nội dung đã bản địa hóa:
+
+```tsx fileName="src/App.tsx"
+// Viết mã React bình thường. Trình biên dịch sẽ tự động trích xuất văn bản
+export default function App() {
+  return (
+    <section>
+      <h1>Chào mừng đến với nền tảng của chúng tôi</h1>
+      <p>Bắt đầu khám phá các tính năng hiện đại ngay hôm nay.</p>
+    </section>
+  );
+}
+```
+
+Ở chế độ nền, Intlayer xây dựng từ điển và liên kết component với nội dung được bản địa hóa, loại bỏ hoàn toàn bước tái cấu trúc thủ công.
+
+Trong trường hợp này, nó sẽ tạo một tệp khai báo `src/App.content.ts` với cấu trúc sau:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    chaoMungDenVoiNenTang: t({
+      vi: "Chào mừng đến với nền tảng của chúng tôi",
+    }),
+    batDauKhamPhaCacTinhNang: t({
+      vi: "Bắt đầu khám phá các tính năng hiện đại ngay hôm nay.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## Dịch thuật hỗ trợ bởi AI với LLM bạn yêu thích
+
+Sau khi trích xuất nội dung, việc dịch sang hàng chục ngôn ngữ không nên mất hàng ngày. Intlayer tích hợp sẵn CLI dịch thuật AI kết nối trực tiếp với OpenAI, Anthropic, DeepSeek hoặc Mistral bằng khóa API của riêng bạn:
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+Cấu hình các ngôn ngữ và nhà cung cấp AI trong `intlayer.config.ts`:
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      Locales.VIETNAMESE,
+    ],
+    defaultLocale: Locales.VIETNAMESE,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext:
+      "Ứng dụng SaaS hiện đại và bảng điều khiển được xây dựng bằng Vite và React",
+  },
+};
+
+export default config;
+```
+
+Chạy `npx intlayer fill` sẽ điền vào các tệp khai báo bản dịch chất lượng cao cho tất cả ngôn ngữ đã cấu hình:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    chaoMungDenVoiNenTang: t({
+      vi: "Chào mừng đến với nền tảng của chúng tôi",
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+    }),
+    batDauKhamPhaCacTinhNang: t({
+      vi: "Bắt đầu khám phá các tính năng hiện đại ngay hôm nay.",
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Vì Intlayer chuyển `applicationContext` cho mô hình ngôn ngữ lớn, các bản dịch được tạo ra giữ được ngữ cảnh kỹ thuật, giọng văn thương hiệu và sắc thái ngữ pháp tốt hơn nhiều so với các công cụ dịch thông thường.
+
+Để kiểm tra xem có chuỗi nào bị bỏ sót hay không trước khi triển khai sản xuất:
+
+```bash
+npx intlayer test
+```
+
+## Tích hợp Vite và thiết lập Provider
+
+Tích hợp Intlayer vào Vite rất đơn giản; chỉ cần thêm plugin vào `vite.config.ts` và bao bọc component gốc bằng `IntlayerProvider`:
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+> Kể từ Intlayer v9, trình biên dịch được tích hợp trực tiếp vào plugin `intlayer()` và sẽ tự động kích hoạt khi cấu hình `compiler.enabled` trong `intlayer.config.ts`.
+
+Bao bọc ứng dụng bằng `IntlayerProvider` trong component gốc:
+
+```tsx fileName="src/App.tsx"
+import { FC } from "react";
+import { IntlayerProvider } from "react-intlayer";
+import { MainContent } from "./MainContent";
+
+const App: FC = () => {
+  return (
+    <IntlayerProvider>
+      <MainContent />
+    </IntlayerProvider>
+  );
+};
+
+export default App;
+```
+
+### Chuyển đổi ngôn ngữ động
+
+Chuyển đổi ngôn ngữ dễ dàng ở bất kỳ đâu trong ứng dụng bằng hook `useLocale`:
+
+```tsx fileName="src/components/LocaleSwitcher.tsx"
+import { FC } from "react";
+import { Locales } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export const LocaleSwitcher: FC = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  return (
+    <select
+      value={locale}
+      onChange={(e) => setLocale(e.target.value as Locales)}
+    >
+      {availableLocales.map((loc) => (
+        <option key={loc} value={loc}>
+          {loc}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+## SEO Đa ngôn ngữ (Sitemap và Robots.txt)
+
+Intlayer đi kèm các tiện ích định dạng như `generateSitemap` và `getMultilingualUrls` để tạo ra các tệp `sitemap.xml` và `robots.txt` đa ngôn ngữ thân thiện với công cụ tìm kiếm cho các dự án Vite tĩnh:
+
+```javascript fileName="generate-seo.mjs"
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { generateSitemap, getMultilingualUrls } from "intlayer";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const SITE_URL = (process.env.SITE_URL || "https://example.com").replace(
+  /\/$/,
+  ""
+);
+
+const pathList = [
+  { path: "/", changefreq: "daily", priority: 1.0 },
+  { path: "/about", changefreq: "monthly", priority: 0.7 },
+];
+
+const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
+fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
+
+const getAllMultilingualUrls = (urls) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));
+
+const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
+
+const robotsTxt = [
+  "User-agent: *",
+  "Allow: /",
+  ...disallowedPaths.map((path) => `Disallow: ${path}`),
+  "",
+  `Sitemap: ${SITE_URL}/sitemap.xml`,
+].join("\n");
+
+fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);
+console.log("Các tệp SEO đã được tạo thành công.");
+```
+
+Thêm hook `prebuild` vào `package.json` của bạn để chạy script này trước khi thực hiện `vite build`:
+
+```json fileName="package.json"
+{
+  "scripts": {
+    "dev": "vite",
+    "prebuild": "node generate-seo.mjs",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+```
+
+## Tìm hiểu sâu hơn: Sẵn sàng cho hướng dẫn từng bước đầy đủ?
+
+Hướng dẫn này đã cung cấp cái nhìn tổng quan về cách bổ sung quốc tế hóa vào ứng dụng Vite và React hiện có vào năm 2026 mà không gặp rắc rối về mặt kiến trúc.
+
+Nếu bạn muốn cấu hình từng phần chi tiết, bao gồm hỗ trợ kiểu TypeScript hoàn chỉnh, từ điển động và trình chỉnh sửa trực quan, vui lòng tham khảo tài liệu hướng dẫn đầy đủ:
+
+👉 **[Hướng dẫn toàn diện về cách dịch Vite và React với Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+react.md)**
+
+## Câu hỏi thường gặp (FAQ)
+
+<FAQ>
+
+<Question title="Tôi có thể làm đa ngôn ngữ cho ứng dụng Vite và React mà không cần sửa đổi thủ công tất cả chuỗi không?">
+
+Có. Bạn có thể sử dụng lệnh `npx intlayer extract` để tự động phát hiện và trích xuất các chuỗi cố định thành các tệp khai báo nội dung đã được bản địa hóa, hoặc dùng trình biên dịch Intlayer để chuyển đổi component trong quá trình build trong khi bạn vẫn viết JSX thông thường.
+
+</Question>
+<Question title="Intlayer giảm dung lượng bundle Vite như thế nào so với react-i18next hoặc react-intl?">
+
+Intlayer sử dụng định nghĩa từ điển theo từng component và tối ưu hóa macro trong quá trình build. Bundle chỉ nhận các trường cần thiết cho những component đang được hiển thị trên trang thay vì nhập toàn bộ tệp JSON đồ sộ. Từ điển động cũng cho phép tải ngôn ngữ theo nhu cầu.
+
+</Question>
+<Question title="Tôi có thể dùng AI để dịch các component hiện có sang nhiều ngôn ngữ không?">
+
+Có. CLI Intlayer có sẵn lệnh `npx intlayer fill`, kết nối trực tiếp với nhà cung cấp AI bạn chọn (OpenAI, Anthropic, Mistral, DeepSeek) để tạo các bản dịch chuẩn ngữ cảnh cho toàn bộ ngôn ngữ đã cấu hình.
+
+</Question>
+<Question title="Tôi có thể di chuyển từ react-i18next hoặc react-intl mà không cần viết lại component không?">
+
+Có. Intlayer cung cấp các adapter tương thích cho `react-i18next` và `react-intl`, cùng với các plugin đồng bộ hóa tệp dịch JSON sẵn có (`sync-json`).
+
+</Question>
+
+</FAQ>