Cara Menambahkan Banyak Bahasa ke Aplikasi atau Website Kamu

Untuk menambahkan banyak bahasa ke aplikasi, pindahkan setiap teks antarmuka ke file terjemahan (satu file per bahasa), muat dengan pustaka i18n, lalu tambahkan pemilih bahasa yang mengingat pilihan pengguna. Untuk halaman publik yang ingin ditemukan di pencarian, beri setiap bahasa URL sendiri seperti /fr/ dan hubungkan versinya dengan tag hreflang. Lalu tangani bagian yang sering terlewat: tanggal, angka dan mata uang, teks yang lebih panjang di beberapa bahasa, skrip kanan-ke-kiri, serta konten yang disimpan di database.

Istilah yang akan kamu temui

• Internasionalisasi (i18n): menyiapkan kode agar mendukung bahasa apa pun — tanpa string yang ditulis langsung, format yang mengikuti locale, dan tata letak yang fleksibel. Angka "18" adalah jumlah huruf di antara i dan n.
• Lokalisasi (l10n): menyesuaikan aplikasi untuk bahasa atau pasar tertentu, terutama penerjemahan, kadang juga mata uang, gambar, dan teks hukum.
• Locale: kombinasi bahasa dan, jika perlu, wilayah, seperti en-GB atau pt-BR.

Lakukan i18n sekali saja, maka menambah bahasa baru akan menjadi pekerjaan penerjemahan saja.

Pilihan dan konsekuensinya

Untuk sebagian besar aplikasi, pustaka i18n standar dengan file terjemahan adalah dasar yang tepat. Kamu boleh membuat draf terjemahan dengan mesin atau AI, lalu minta penutur asli yang fasih meninjau bagian yang paling sering dilihat pelanggan.

Bagian-bagian aplikasi multibahasa

File terjemahan

Alih-alih menulis <h1>Welcome back</h1>, kode menulis t('dashboard.welcome'), dan setiap locale punya file yang berisi teksnya:

{
  "dashboard": {
    "welcome": "Selamat datang kembali, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} item"
  }
}

Gunakan placeholder untuk variabel, jangan menyambung potongan kalimat, karena urutan kata berbeda di setiap bahasa. Dan gunakan aturan jamak dari pustaka: bahasa Inggris punya dua bentuk (1 item, 2 items), tetapi beberapa bahasa punya tiga, empat, atau lebih.

Memformat tanggal, angka, dan uang

Jangan memformatnya secara manual. API Intl bawaan browser memformat untuk locale apa pun: 1,234.5 dalam bahasa Inggris menjadi 1.234,5 dalam bahasa Jerman; tanggal berganti antara hari-dulu dan bulan-dulu; simbol mata uang berpindah posisi. Simpan tanggal dalam UTC dan uang sebagai angka dengan kode mata uang, lalu format hanya untuk tampilan.

Tata letak yang harus melebar

Teks terjemahan sering lebih panjang dari bahasa Inggris, terutama kata-kata dalam bahasa Jerman dan Finlandia. Hindari tombol dengan lebar tetap dan label yang terpotong, lalu uji dengan bahasa yang paling panjang.

Bahasa kanan-ke-kiri

Bahasa Arab, Ibrani, Persia, dan Urdu dibaca dari kanan ke kiri. Atur dir="rtl" pada halaman untuk locale tersebut dan gunakan properti logis CSS (margin-inline-start sebagai pengganti margin-left; di Tailwind, ms-4 sebagai pengganti ml-4) agar tata letak ikut terbalik secara otomatis. Ikon yang menunjukkan arah, seperti panah, juga perlu dibalik.

Pemilih bahasa dan deteksi

Tampilkan pemilih bahasa di setiap halaman, dengan nama setiap bahasa dalam bahasanya sendiri ("Deutsch", "Français", "العربية"), bukan bendera. Bendera melambangkan negara, bukan bahasa. Deteksi bahasa pilihan browser saat kunjungan pertama untuk menyarankan versi tertentu, tetapi pilihan eksplisit pengunjung harus didahulukan dan diingat.

URL dan SEO

Untuk halaman yang ingin muncul di hasil pencarian, setiap bahasa membutuhkan URL sendiri. Per September 2026, panduan Google untuk situs multibahasa adalah:

• URL terpisah per bahasa — subdirektori (example.com/fr/) adalah yang paling sederhana; subdomain dan domain negara juga bisa. Parameter URL (?lang=fr) tidak direkomendasikan.
• Jangan mengganti bahasa hanya lewat cookie atau pengaturan browser; crawler Google mungkin tidak pernah melihat versi lainnya.
• Jangan mengalihkan otomatis berdasarkan bahasa; tautkan antar versi.
• Gunakan hreflang untuk memberi tahu Google halaman mana yang merupakan terjemahan satu sama lain. Setiap versi harus mencantumkan dirinya sendiri dan semua versi lain, atau anotasinya bisa diabaikan. Tambahkan x-default untuk halaman cadangan.
• Google mendeteksi bahasa halaman dari konten yang terlihat, bukan dari lang atau hreflang — jadi terjemahkan seluruh halaman, bukan hanya menunya.

Tetap atur <html lang="fr"> pada setiap versi: pembaca layar menggunakannya untuk memilih pelafalan yang benar, dan ini merupakan persyaratan aksesibilitas.

Layar aplikasi yang memerlukan login tidak perlu diindeks, jadi untuk layar tersebut menyimpan bahasa di profil pengguna sudah cukup. Lihat SEO untuk website yang dibuat dengan AI untuk memastikan halaman publik bisa di-crawl sejak awal.

Konten di database

Teks antarmuka disimpan dalam file; konten seperti nama produk, postingan blog, dan kategori disimpan dalam database. Dua pola yang umum:

• Tabel terjemahan: product_translations (product_id, locale, name, description). Rapi dan mudah diskalakan untuk banyak bahasa.
• Kolom JSON per field: name: {"en": "...", "fr": "..."}. Lebih sederhana untuk beberapa bahasa saja.

Tentukan apa yang terjadi jika terjemahan tidak ada — biasanya kembali ke bahasa default, bukan menampilkan ruang kosong.

Email dan notifikasi

Simpan bahasa setiap pengguna dan gunakan juga untuk email, notifikasi, dan PDF. Mudah sekali menerjemahkan aplikasi lalu lupa bahwa email selamat datang masih datang dalam bahasa Inggris.

Prompt yang berhasil

Tambahkan internasionalisasi dengan react-i18next. Pindahkan setiap string yang terlihat oleh pengguna ke locales/en.json dengan kunci yang dikelompokkan dalam namespace, gunakan interpolasi dan aturan jamak alih-alih penyambungan string, dan format tanggal, angka, dan harga dengan Intl sesuai locale yang aktif. Jangan ubah kata-kata dulu.

Tambahkan bahasa Prancis dan Jerman. Halaman pemasaran publik mendapat awalan URL /fr/ dan /de/ dengan bahasa Inggris di root, tautan hreflang di setiap halaman (termasuk self-reference dan x-default), dan atribut html lang diatur per halaman. Tambahkan pemilih bahasa yang menampilkan nama asli setiap bahasa. Untuk halaman yang memerlukan login, simpan bahasa di profil pengguna.

Tambahkan bahasa Arab dengan dukungan kanan-ke-kiri: atur dir="rtl" untuk bahasa Arab, ganti margin dan padding kiri/kanan dengan properti logis, balik ikon yang menunjukkan arah, dan pastikan formulir serta tabel tetap terbaca dengan benar.

Langkah demi langkah

1. Pilih bahasa tambahan pertama berdasarkan permintaan nyata — di mana pengunjung atau pelanggan kamu berada.
2. Buat kode siap i18n: pindahkan string ke file, tambahkan aturan jamak dan format Intl. Rilis dengan bahasa Inggris saja dan pastikan tidak ada yang berubah.
3. Tentukan struktur URL untuk halaman publik dan tambahkan hreflang.
4. Terjemahkan: buat draf dengan terjemahan mesin atau AI, lalu tinjau bersama penutur asli yang fasih. Berikan konteks kepada penerjemah — kata "Book" bisa berarti kata benda di satu layar dan kata kerja di layar lain.
5. Terjemahkan konten database dan atur cadangannya.
6. Lokalkan bagian lainnya: email, pesan error, halaman hukum, gambar yang berisi teks.
7. Uji setiap bahasa pada lebar layar ponsel, dan dengan kanan-ke-kiri jika relevan.
8. Siapkan proses agar fitur baru selalu dirilis bersama terjemahannya, bukan berbulan-bulan kemudian.

Kesalahan yang sering terjadi

• Menyambung kalimat ("You have " + n + " messages"), yang rusak di bahasa lain.
• Teks yang masih ditulis langsung di komponen, pesan error, dan string validasi.
• Memformat tanggal dan harga secara manual.
• Menggunakan bendera untuk bahasa, dan pengalihan otomatis yang membuat orang terjebak di versi yang salah.
• Satu URL untuk semua bahasa pada halaman yang ingin diindeks.
• Tautan balik hreflang yang hilang, sehingga Google mengabaikan anotasinya.
• Menerjemahkan antarmuka tetapi bukan kontennya, atau sebaliknya.
• Terjemahan mesin yang tidak ditinjau pada halaman harga, hukum, dan checkout.

Checklist multibahasa

• Tidak ada string yang terlihat oleh pengguna ditulis langsung; aturan jamak dan placeholder digunakan
• Tanggal, angka, dan mata uang diformat dengan Intl
• Pemilih bahasa dengan nama asli di setiap halaman; pilihan diingat
• URL terpisah per bahasa untuk halaman publik; tanpa pengalihan paksa
• hreflang di setiap versi, termasuk self dan x-default
• html lang (dan dir="rtl" bila perlu) diatur per halaman
• Konten database diterjemahkan dengan cadangan yang masuk akal
• Email dan notifikasi dikirim dalam bahasa pengguna
• Teks yang dilihat pelanggan ditinjau oleh penutur asli yang fasih

Multibahasa di Mythex

Di Mythex, kamu menambahkan bahasa dengan meminta lewat chat — tidak ada panel terjemahan terpisah — jadi prompt di atas bisa langsung dipakai. Lakukan langkah internasionalisasi dulu dan periksa di Preview sebelum menambah bahasa; ini refactor besar, dan checkpoint chat memberi kamu titik untuk kembali jika ada yang rusak (chat dan checkpoint). Jika kamu ingin aplikasi menerjemahkan konten secara otomatis dengan API AI atau terjemahan, itu memakai API key milikmu sendiri yang disimpan di pengaturan proyek (variabel lingkungan dan secret); cara menggunakan API LLM menjelaskan biayanya. Publikasikan ulang setelah bahasa baru siap.

Pertanyaan