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.

Mục lục

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:

npx 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:

// 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:

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:

npx intlayer fill

Cấu hình các ngôn ngữ và nhà cung cấp AI trong 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:

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:

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:

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:

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:

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:

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:

{
  "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

Câu hỏi thường gặp (FAQ)