next-intl VS Intlayer: Điểm chuẩn quốc tế hóa (i18n) trên React & Next.js

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 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, 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.

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

• next-intl - Tiêu chuẩn cộng đồng của Next.js. Các từ điển JSON tập trung cho từng ngôn ngữ, hỗ trợ đầy đủ định dạng ICU MessageFormat, tích hợp sâu vào quy trình xử lý request và định tuyến của Next.js.
• Intlayer - Mô hình nội dung lấy component làm trung tâm. Các tệp .content.ts đặt ngay cạnh component, trình biên dịch thực hiện tree-shaking và tải lười (lazy loading) theo component và ngôn ngữ, tự động tạo các kiểu TypeScript nghiêm ngặt.

Hiển thị tất cả nội dung bảng

Hiển thị tất cả nội dung bảng

Mở bảng trong một cửa sổ bật lên để xem toàn bộ nội dung dữ liệu một cách rõ ràng

Thư viện	Ngôi sao GitHub	Tổng số commit	Commit cuối	Phiên bản đầu	Phiên bản NPM	Lượt tải NPM
aymericzip/intlayer				Tháng 4 2024
amannn/next-intl				Tháng 3 2021

Huy hiệu được cập nhật tự động.

So sánh tính năng chi tiết

Bài kiểm tra điểm chuẩn

Những gì đã được đo lường

Bộ thử nghiệm Benchmark Bloom xây dựng cùng một ứng dụng với mỗi thư viện: 10 trang (home, about, blog, careers, contact, FAQ, pricing, products, settings, team), 10 ngôn ngữ (en, fr, es, de, it, pt, zh, ja, ko, ru), component giống hệt nhau và nội dung giống hệt nhau. Các trang được đo lường bằng en và fr. Mỗi thư viện được thử nghiệm theo bốn chiến lược tải:

Intlayer không có biến thể "scoped": trình biên dịch tự động thu hẹp phạm vi nội dung theo từng component, do đó các hàng static và dynamic vốn đã được tối ưu hóa phạm vi.

Bộ công cụ ghi lại:

• Kích thước thư viện (Lib size): kích thước gzip của component trống chỉ import thư viện i18n.
• JS trang (Page JS): dung lượng JavaScript gzip tải về trên mỗi trang.
• % rò rỉ ngôn ngữ (Locale leak %): tỷ lệ chuỗi thuộc về ngôn ngữ mà người dùng không xem.
• % rò rỉ trang (Page leak %): tỷ lệ chuỗi thuộc về trang mà người dùng không truy cập.
• Trung bình component (Component avg): kích thước gzip trung bình của mỗi component khi được biên dịch riêng lẻ.
• Độ phản hồi E2E: thời gian từ khi chọn ngôn ngữ mới đến khi DOM cập nhật html[lang].
• Hydrate (Hydration): thời lượng của giai đoạn hydrate trong React.

Dữ liệu dưới đây được lấy từ lần chạy ngày 2026-09-12 với next-intl 4.14.2 và intlayer 9.5.1.

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:

Cách đọc kết quả

• Chi phí runtime. Ứng dụng gốc nặng 141.0 KB trên mỗi trang. next-intl tăng lên 153.6 KB (+12.6 KB gzip trên mỗi trang), trong khi Intlayer chỉ tốn 141.3 KB (+0.3 KB).
• 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.

Bảng đầy đủ, từng thư viện và từng chiến lược, trong báo cáo benchmark Next.js.

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.

Cách đọc kết quả

• Cấu hình đơn giản của use-intl gửi nhiều hơn 68.8 KB JS trên mỗi trang so với ứng dụng gốc.
• Ở chế độ dynamic, use-intl đạt mức 119.4 KB nhưng vẫn có 89.8% rò rỉ trang.
• 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).

Bảng đầy đủ trong báo cáo benchmark TanStack Start.

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

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").

.
├── messages
│   ├── en.json
│   └── fr.json
└── src
    ├── i18n
    │   ├── request.ts
    │   └── routing.ts
    ├── middleware.ts
    └── app
        └── [locale]
            ├── layout.tsx
            └── about
                └── page.tsx

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

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:

.
├── intlayer.config.ts
└── src
    ├── middleware.ts
    └── app
        └── [locale]
            ├── layout.tsx
            └── about
                ├── page.tsx
                └── page.content.ts
    └── components
        └── Counter
            ├── index.tsx
            └── index.content.ts

Tại thời điểm build, trình biên dịch nhận biết component nào import từ điển nào và chỉ đóng gói những từ điển cần thiết cho ngôn ngữ đang hoạt động.

Để có được các số liệu của hàng dynamic, hãy đặt dictionary.importMode: 'dynamic' trong intlayer.config.ts. Xem thêm tài liệu tối ưu hóa bundle.

Trải nghiệm lập trình viên

Client component

{
  "counter": {
    "label": "Counter",
    "increment": "Increment"
  }
}

"use client";

import { useState } from "react";
import { useTranslations, useFormatter } from "next-intl";

export const Counter = () => {
  const t = useTranslations("counter");
  const format = useFormatter();
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{format.number(count)}</p>
      <button aria-label={t("label")} onClick={() => setCount((c) => c + 1)}>
        {t("increment")}
      </button>
    </div>
  );
};

import { t, type Dictionary } from "intlayer";

const counterContent = {
  key: "counter",
  content: {
    label: t({ en: "Counter", fr: "Compteur" }),
    increment: t({ en: "Increment", fr: "Incrémenter" }),
  },
} satisfies Dictionary;

export default counterContent;

"use client";

import { useState } from "react";
import { useIntlayer } from "next-intlayer";
import { useNumber } from "next-intlayer/format";

export const Counter = () => {
  const { label, increment } = useIntlayer("counter");
  const number = useNumber();
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{number(count)}</p>
      <button aria-label={label} onClick={() => setCount((c) => c + 1)}>
        {increment}
      </button>
    </div>
  );
};

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.

type ServerCounterProps = {
  t: (key: string) => string;
  formattedCount: string;
};

export const ServerCounter = ({ t, formattedCount }: ServerCounterProps) => (
  <div>
    <p>{formattedCount}</p>
    <button aria-label={t("label")}>{t("increment")}</button>
  </div>
);

import { useIntlayer } from "next-intlayer/server";
import { useNumber } from "next-intlayer/server/format";

export const ServerCounter = ({ count }: { count: number }) => {
  const { label, increment } = useIntlayer("counter");
  const number = useNumber();

  return (
    <div>
      <p>{number(count)}</p>
      <button aria-label={label}>{increment}</button>
    </div>
  );
};

Metadata

import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { routing } from "@/i18n/routing";

const localizedPath = (locale: string, path: string) =>
  locale === routing.defaultLocale ? path : `/${locale}${path}`;

export const generateMetadata = async ({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> => {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "about" });

  const languages = Object.fromEntries(
    routing.locales.map((l) => [l, localizedPath(l, "/about")])
  );

  return {
    title: t("title"),
    description: t("description"),
    alternates: {
      canonical: localizedPath(locale, "/about"),
      languages: { ...languages, "x-default": "/about" },
    },
  };
};

import { getIntlayer, getMultilingualUrls } from "intlayer";
import type { Metadata } from "next";
import type { LocalPromiseParams } from "next-intlayer";

export const generateMetadata = async ({
  params,
}: LocalPromiseParams): Promise<Metadata> => {
  const { locale } = await params;
  const metadata = getIntlayer("about-metadata", locale);
  const multilingualUrls = getMultilingualUrls("/about");

  return {
    ...metadata,
    alternates: {
      canonical: multilingualUrls[locale as keyof typeof multilingualUrls],
      languages: { ...multilingualUrls, "x-default": "/about" },
    },
  };
};

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.

import type { NextConfig } from "next";
import { createNextIntlPlugin } from "@intlayer/next-intl/plugin";

const withIntlayer = createNextIntlPlugin();

const nextConfig: NextConfig = {};

export default withIntlayer(nextConfig);

Trong bài đánh giá, bản build tương thích của cùng ứng dụng đã giảm từ 153.6 KB xuống 147.5 KB mỗi trang, kích thước component giảm từ 21.8 KB xuống 8.1 KB, và rò rỉ trang giảm từ ~90% xuống 0% mà không cần sửa đổi mã ứng dụng. Các tệp messages/{locale}.json hiện tại của bạn vẫn có thể đóng vai trò là nguồn dữ liệu chuẩn thông qua plugin đồng bộ JSON.

Xem thêm hướng dẫn chuyển đổi next-intl để biết các bước chi tiết.

Khi nào nên chọn thư viện nào?

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

So sánh liên quan

Cùng bài benchmark, các thư viện khác:

Tìm hiểu sâu hơn về next-intl:

Tài liệu tham khảo:

Để hiểu các thư viện này đến từ đâu, hãy đọc lịch sử i18n trong JavaScript.

Ngôi sao GitHub

Số sao GitHub là một thước đo rõ ràng về mức độ phổ biến, sự tin cậy của cộng đồng và tính bền vững lâu dài của dự án.

Hoạt động commit

Số sao thể hiện độ phổ biến. Số commit thể hiện lượng công sức đổ vào một dự án. Tại thời điểm viết bài, Intlayer có khoảng 7.500 commit, nhiều hơn phần lớn các thư viện được so sánh ở đây và gấp khoảng 5 lần next-intl hoặc next-i18next.

Intlayer là một monorepo, nên con số này bao gồm mọi gói framework, CLI và tài liệu. Hãy xem commit là tín hiệu về mức độ hoạt động, không phải về chất lượng.

Lượt tải npm

Lượt tải ưu ái các giải pháp lâu đời nhất, không phải các giải pháp tốt nhất. Một thư viện ra mắt từ nhiều năm trước vẫn được cài đặt bởi mọi dự án đã chọn nó khi đó, mọi lần chạy CI và mọi gói phụ thuộc vào nó. Con số này đo sức ì nhiều hơn là một lựa chọn mới.

Các trợ lý AI khuếch đại hiệu ứng này. next-intl, i18next và vue-i18n xuất hiện khắp nơi trong mã nguồn mà chúng được huấn luyện, nên chúng đề xuất các thư viện này theo mặc định, mà không so sánh các lựa chọn khác. Mỗi đề xuất lại tăng lượt tải, và lượt tải đó thúc đẩy đề xuất tiếp theo. Hãy so sánh dựa trên benchmark thay vì số lượt tải.

Kết luận

next-intl là một thư viện ổn định và được duy trì tốt trên Next.js. Tuy nhiên, mô hình danh mục tập trung đặt toàn bộ gánh nặng tối ưu hóa lên vai lập trình viên: cấu hình thông thường làm rò rỉ khoảng 90% nội dung của các trang khác, và bản thân runtime đã tốn thêm +12.6 KB gzip trên mỗi trang.

Intlayer chuyển toàn bộ công việc đó sang trình biên dịch. Từ điển theo component, tải lười theo ngôn ngữ và loại bỏ nội dung không sử dụng trở thành kết quả build tự động. Kết quả trên cùng ứng dụng: +0.3 KB mỗi trang, 0% rò rỉ, component nhỏ hơn gấp 3 lần, và chuyển đổi ngôn ngữ nhanh hơn 2 đến 4 lần trên TanStack Start.

Toàn bộ dữ liệu thô, ứng dụng thử nghiệm và mã script đều có sẵn tại kho lưu trữ Benchmark Bloom.

Xem thêm tài liệu 'Tại sao chọn Intlayer?' để biết thêm chi tiết.