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.

Mục lục

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:

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

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

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:

npx intlayer fill

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:

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:

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:

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 :

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:

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

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