Cara Memilih Library React i18n yang Tepat

React tidak menyediakan primitif i18n bawaan. Library yang Anda pilih sejak hari pertama menentukan bagaimana terjemahan disimpan, bagaimana terjemahan masuk ke dalam bundle, dan seberapa banyak pekerjaan yang harus Anda tangani sendiri selama beberapa tahun ke depan. Sebagian besar tim memilih berdasarkan popularitas, lalu baru menyadari konsekuensi dan komprominya saat sudah mencapai 2.000 kunci.

Panduan ini mengambil pendekatan sebaliknya: jawab beberapa pertanyaan tentang proyek Anda terlebih dahulu, lalu petakan jawabannya ke library yang paling cocok. Panduan ini berfokus pada React murni (Vite, React Router, TanStack Start). Next.js memiliki batasan dan karakteristik tersendiri, yang dibahas dalam perbandingan Next.js.

Daftar Isi

Enam pertanyaan yang harus dijawab sebelum membandingkan library

Tabel fitur tidak ada gunanya tanpa mengetahui baris mana yang penting bagi Anda. Evaluasi pertanyaan-pertanyaan ini terlebih dahulu.

1. Bagaimana aplikasi dirender? Hanya SPA, SSR dengan hydration, atau React Server Components. Hook berbasis konteks berfungsi di mana saja dalam SPA. Dengan RSC, sebuah hook memaksa "use client" pada setiap komponen yang merender teks, sehingga Anda juga akan memerlukan API sisi server.
2. Siapa yang menulis terjemahan? Developer, tim internal yang menggunakan TMS, agensi yang mengirimkan file ICU, atau pipeline AI. Hal ini menentukan format katalog lebih dari detail API mana pun.
3. Berapa banyak locale dan halaman? Dua locale dan lima halaman masih sanggup memuat semuanya sekaligus. Sepuluh locale dan lima puluh route tidak bisa, dan strategi pemuatan menjadi biaya utama.
4. Apakah Anda memerlukan type safety pada kunci (keys)? Typo pada t("checkout.totl") tetap ter-compile di setiap library berbasis kunci kecuali jika Anda menghubungkan type-nya sendiri. Tentukan apakah hal tersebut dapat diterima.
5. Apa yang ada di dalam string? Teks biasa, bentuk jamak (plurals), atau kalimat dengan <Link> di tengahnya. Konten kaya (rich content) adalah bagian di mana sebagian besar API mulai terasa canggung.
6. Berapa lama proyek akan berjalan? Prototipe tiga bulan dan produk lima tahun tidak memerlukan jumlah build tooling yang sama.

Tuliskan jawabannya. Semua pembahasan di bawah ini merujuk kembali ke jawaban-jawaban tersebut.

Gambaran lanskap dalam satu gambar

Lima belas tahun JavaScript i18n terbagi dalam empat gelombang arsitektur, dan library React yang akan Anda bandingkan berasal dari gelombang yang berbeda.

Sejarah JavaScript i18n merinci bagaimana setiap gelombang menjawab masalah dari gelombang sebelumnya.

Keputusan yang paling penting: di mana konten berada dan kapan dimuat

Setiap library React i18n memiliki bentuk yang serupa: sebuah store, provider, dan hook. Apa pun yang diterima oleh provider akan berakhir di bundle klien atau dalam payload hydration. Jadi dua pilihan struktural utamanya adalah:

• Konten terpusat (centralized) atau terlingkup (scoped). Satu en.json untuk seluruh aplikasi, atau satu deklarasi per komponen (atau per namespace).
• Static import atau dynamic import. Semuanya di-bundle saat startup, atau locale aktif dan route diambil sesuai permintaan (on demand).

Grafik di bawah ini memperkirakan payload untuk aplikasi teoritis 1 hingga 10 halaman, diterjemahkan ke dalam 1 hingga 10 locale, dengan sekitar 30 KB teks per halaman.

Konten terpusat dengan static import bertambah seiring kedua sumbu: 10 halaman dikali 10 locale berarti 300 KB teks di setiap halaman. Dynamic import menghilangkan sumbu locale. Scoping menghilangkan sumbu halaman. Hanya kombinasinya yang tetap stabil dan datar.

Ini bukan sekadar karakteristik library, melainkan masalah disiplin implementasi. react-i18next dapat di-scope dengan namespace dan backend lazy loading. use-intl dapat dipecah per route. Namun tidak ada yang memaksakannya, dan sebuah <Button> bersama yang mengakses t("common:cta") secara diam-diam menjadikan common sebagai dependensi dari setiap route. Benchmark mengukur ini sebagai "kebocoran dari route lain" dan "kebocoran dari locale lain", dan dari sinilah sebagian besar perbedaan performa antar library berasal.

Jika jawaban Anda untuk pertanyaan 3 adalah "banyak locale, banyak halaman", pertimbangkan bagian ini lebih dari preferensi API apa pun. Artikel i18n per komponen vs terpusat membahas lebih dalam mengenai sisi pemeliharaan dari pilihan yang sama.

Para kandidat

Ukuran library diambil dari benchmark TanStack Start: provider ditambah hook dalam komponen kosong, setelah bundling, tree-shaking, dan minifikasi, 10 halaman dan 10 locale. Konten diukur secara terpisah.

Angka-angka ini adalah snapshot pada versi saat benchmark dilakukan dan dapat berubah seiring rilis versi baru. Jalankan benchmark pada aplikasi Anda sendiri sebelum memutuskan hanya berdasarkan ukuran.

Dua hal yang tidak ditampilkan dalam tabel. Paraglide hampir tidak memuat kode library karena men-generate kode langsung ke dalam repo Anda, yang berarti diperlukan langkah regenerasi sebelum setiap commit dan potensi merge conflict pada file yang di-generate. Dan Intlayer memerlukan plugin bundler (vite-intlayer atau setara), sehingga tidak dapat berjalan dalam setup tanpa proses build.

Cocokkan jawaban Anda dengan library

Di mana letak kekurangan setiap library

Batasan realistis, karena setiap opsi pasti memilikinya.

• react-i18next: paling berat di antara semuanya, format plural sendiri, konfigurasi type harus Anda pelihara sendiri, dan dead keys menumpuk tanpa disadari.
• react-intl: DX cukup bertele-tele (useIntl() lalu formatMessage({ id })), instance global terikat pada banyak node.
• use-intl: mudah untuk memulai, cukup rumit saat dioptimalkan. Menggabungkan namespace, dynamic loading, dan typing secara bersamaan cukup memperlambat alur pengembangan.
• Lingui: langkah build tambahan extract / compile, beberapa sintaks yang tumpang tindih (t(), tagged template, i18n.t(), <Trans>) yang membingungkan manusia maupun asisten AI.
• Paraglide: file ter-generate di dalam repo, tree-shaking tidak bekerja optimal dalam benchmark React, dan locale dibaca dari storage pada setiap node alih-alih dari store terpusat.
• Tolgee: tidak ada typing pada kunci, onboarding lebih sulit, in-context editing adalah nilai jual utamanya.
• Intlayer: wajib menggunakan plugin build, ekosistem lebih baru dan lebih kecil, dukungan ICU parsial, konten tersebar di seluruh codebase secara sengaja sehingga mengekspor satu file JSON untuk penerjemah memerlukan tooling tambahan.
• gt-react, lingo.dev: tidak direkomendasikan dalam benchmark: error kuota saat build, keterikatan vendor (vendor lock-in), dan masalah reaktivitas yang mengharuskan re-render paksa pada provider.

Gambaran masing-masing opsi dalam kode

Komponen yang sama, ringkasan keranjang belanja (cart summary) dengan judul dan bentuk jamak (plural), ditulis dengan setiap kandidat. Bagian yang menarik bukanlah komponennya, melainkan di mana konten berada dan apa yang diketahui oleh type checker tentang konten tersebut.

{
  "title": "Your cart",
  "items_one": "{{count}} item",
  "items_other": "{{count}} items"
}

import type { FC } from "react";
import { useTranslation } from "react-i18next";

export const CartSummary: FC<{ count: number }> = ({ count }) => {
  const { t } = useTranslation("cart");

  return (
    <section>
      <h2>{t("title")}</h2>
      <p>{t("items", { count })}</p>
    </section>
  );
};

{
  "cart.title": "Your cart",
  "cart.items": "{count, plural, one {# item} other {# items}}"
}

import type { FC } from "react";
import { FormattedMessage, useIntl } from "react-intl";

export const CartSummary: FC<{ count: number }> = ({ count }) => {
  const intl = useIntl();

  return (
    <section>
      <h2>
        <FormattedMessage id="cart.title" />
      </h2>
      <p>{intl.formatMessage({ id: "cart.items" }, { count })}</p>
    </section>
  );
};

{
  "Cart": {
    "title": "Your cart",
    "items": "{count, plural, one {# item} other {# items}}"
  }
}

import type { FC } from "react";
import { useTranslations } from "use-intl";

export const CartSummary: FC<{ count: number }> = ({ count }) => {
  const t = useTranslations("Cart");

  return (
    <section>
      <h2>{t("title")}</h2>
      <p>{t("items", { count })}</p>
    </section>
  );
};

msgid "Your cart"
msgstr "Votre panier"

msgid "{count, plural, one {# item} other {# items}}"
msgstr "{count, plural, one {# article} other {# articles}}"

import type { FC } from "react";
import { Plural, Trans } from "@lingui/react/macro";

export const CartSummary: FC<{ count: number }> = ({ count }) => (
  <section>
    <h2>
      <Trans>Your cart</Trans>
    </h2>
    <p>
      <Plural value={count} one="# item" other="# items" />
    </p>
  </section>
);

{
  "cart_title": "Your cart",
  "cart_items": "{count} items"
}

import type { FC } from "react";
import { m } from "../paraglide/messages.js";

export const CartSummary: FC<{ count: number }> = ({ count }) => (
  <section>
    <h2>{m.cart_title()}</h2>
    <p>{m.cart_items({ count })}</p>
  </section>
);

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

const cartSummaryContent = {
  key: "cart-summary",
  content: {
    title: t({
      id: "Keranjang Anda",
      en: "Your cart",
      fr: "Votre panier",
      es: "Tu carrito",
    }),
    items: t({
      id: plural({ one: "{{count}} item", other: "{{count}} item" }),
      en: plural({ one: "{{count}} item", other: "{{count}} items" }),
      fr: plural({ one: "{{count}} article", other: "{{count}} articles" }),
      es: plural({ one: "{{count}} artículo", other: "{{count}} artículos" }),
    }),
  },
} satisfies Dictionary;

export default cartSummaryContent;

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

export const CartSummary: FC<{ count: number }> = ({ count }) => {
  const { title, items } = useIntlayer("cart-summary");

  return (
    <section>
      <h2>{title}</h2>
      <p>{items(count)}</p>
    </section>
  );
};

Sudah menggunakan react-i18next, react-intl, atau Lingui? Adapter kompatibilitas (react-i18next, react-intl, Lingui) melakukan alias pada import di level bundler sehingga API yang ada tetap berfungsi saat Anda bermigrasi komponen demi komponen. Panduan migrasi mencakup langkah-langkah lainnya.

Sebelum Anda memutuskan

Tabel fitur menunjukkan apa yang bisa dilakukan library hari ini. Poin-poin berikut memberi tahu Anda seperti apa pengalaman menggunakannya dalam jangka panjang.

Periksa aktivitas repositori.

Commit, waktu respons issue, dan apakah rilis minor terakhir dilakukan tahun ini. Desain yang baik tanpa pengelola aktif adalah awal dari migrasi terpaksa di kemudian hari.

Jangan memilih hanya berdasarkan unduhan npm.

Library yang paling banyak diunduh adalah yang dirilis paling awal, bukan yang paling cocok untuk codebase React tahun 2026. Jumlah unduhan mengukur riwayat masa lalu, bukan kecocokan saat ini.

Ketahui siapa yang mendanai pengelola, dan apa yang mereka jual.

i18next didukung oleh Locize. next-intl / use-intl, vue-i18n, svelte-i18n, dan Lingui didukung oleh Crowdin. Tolgee, Paraglide (inlang), dan Intlayer masing-masing menjalankan platform mereka sendiri. Vendor yang pendapatannya berasal dari hosting terjemahan memiliki sedikit insentif untuk membuat terjemahan gratis di dalam alur kerja alat Anda. Intlayer adalah satu-satunya dari daftar ini yang menyediakan terjemahan AI melalui CLI dengan API key Anda sendiri, serta CMS yang dapat Anda hosting sendiri (self-host).

Apakah siap untuk AI Agent?

Agent AI masih sering kesulitan dengan i18n: lupa menyertakan locale, membuat kunci fiktif, dan mencampur aduk sintaks pesan. Apakah library menyediakan Agent Skills atau server MCP agar agent dapat menampilkan daftar, mengisi, dan menguji konten? Dan apakah pemuatan konten dioptimalkan secara default, atau seseorang harus meninjau namespace dan lazy import setiap kuartal?

Type safety bawaan.

Bukan sekadar "bisa diberi type dengan konfigurasi manual tambahan", melainkan "kunci yang salah langsung menggagalkan tsc pada instalasi baru". Periksa apa yang terjadi jika ada kunci yang tidak ada, atau jika sebuah locale kekurangan satu terjemahan.

Deteksi konten yang tidak digunakan.

Katalog terjemahan cenderung terus bertambah. Build Intlayer membersihkan field yang tidak digunakan dan mencatatnya (build.purge). Paraglide mencapainya melalui arsitektur, karena fungsi pesan yang tidak dipanggil akan di-tree-shake. Opsi lainnya menyerahkan pembersihan ini sepenuhnya kepada Anda.

Pengalaman pengembang (Developer Experience).

Waktu setup hingga string terjemahan pertama berfungsi, LSP atau ekstensi VS Code yang menampilkan terjemahan saat kursor diarahkan (hover) dan melompat langsung ke deklarasi, CLI untuk fill, test, dan push, serta cara bagi non-developer untuk mengedit konten (editor visual atau CMS) tanpa perlu membuka pull request.

Pertanyaan yang Sering Diajukan

Langkah selanjutnya

• Benchmark library i18n: ukuran bundle, kebocoran, dan waktu peralihan locale dan laporan TanStack Start
• React i18n: cara kerja model provider dan dampaknya
• react-i18next vs react-intl vs Intlayer, fitur demi fitur
• next-i18next vs next-intl vs Intlayer
• Sejarah JavaScript i18n
• i18n Compiler vs deklaratif
• i18n per komponen vs terpusat
• Cara kerja optimasi bundle pada waktu build
• Menyiapkan i18n dalam aplikasi Vite + React
• Panduan yang sama untuk Vue, Svelte, dan Solid