Internationalization (i18n) adalah praktik merancang dan mengembangkan aplikasi web sedemikian rupa sehingga dapat dengan mudah diadaptasi ke berbagai bahasa dan wilayah geografis tanpa memerlukan perubahan rekayasa pada kode inti. Ini berbeda dengan Localization (l10n), yang merupakan proses adaptasi aktual aplikasi untuk wilayah atau bahasa tertentu (misalnya, menerjemahkan teks, format tanggal/waktu, mata uang). Singkatnya, i18n adalah tentang membuat aplikasi "siap untuk dilokalisasi", sementara l10n adalah tentang "melokalisasi" aplikasi tersebut.

Mengapa i18n penting? Karena ini memungkinkan aplikasi Anda menjangkau audiens global, meningkatkan user experience bagi pengguna di berbagai negara, dan membuka peluang pasar yang lebih luas.

Pilar Utama Internationalization (i18n)

Untuk membuat aplikasi web siap untuk i18n, Anda perlu mempertimbangkan beberapa aspek kunci:

1. Manajemen Teks (String Management):

   • Ekstraksi Teks: Semua teks yang terlihat oleh pengguna (label, pesan error, instruksi, dll.) harus diekstrak dari kode sumber dan disimpan dalam file terpisah. Ini memungkinkan penerjemah untuk bekerja pada teks tanpa menyentuh kode.

   • Placeholder/Interpolasi: Seringkali, teks mengandung bagian dinamis (misalnya, "Halo, [Nama Pengguna]!"). Sistem i18n harus mendukung placeholder agar penerjemah tidak perlu memecah kalimat.

   • Pluralisasi: Penanganan bentuk jamak yang berbeda (misalnya, "1 item" vs. "5 items"). Aturan jamak sangat bervariasi antar bahasa.

2. Format Data Sensitif Lokal:

   • Angka: Pemisah ribuan dan desimal berbeda (misalnya, 1,234.56 di AS vs. 1.234,56 di Jerman).

   • Mata Uang: Simbol mata uang, posisi simbol, dan pemisah.

   • Tanggal dan Waktu: Berbagai format (MM/DD/YYYY, DD/MM/YYYY), nama hari/bulan, format 12/24 jam.

   • Urutan Sortir: Cara teks diurutkan dapat berbeda antar bahasa.

3. Aset dan Sumber Daya Lokal:

   • Gambar & Video: Mungkin perlu diubah untuk mencerminkan nuansa budaya atau teks yang tersemat.

   • Ikon: Beberapa ikon bisa memiliki arti berbeda atau ofensif di budaya tertentu.

   • Tata Letak (Layout): Beberapa bahasa (misalnya, Arab, Ibrani) ditulis dari kanan ke kiri (RTL), yang memerlukan penyesuaian layout UI.

4. Deteksi Preferensi Bahasa Pengguna:

   • Header Accept-Language: Browser mengirimkan preferensi bahasa pengguna melalui header ini.

   • URL: Menggunakan subdomain (https://www.google.com/search?q=es.example.com), path (example.com/es/), atau query parameter (https://www.google.com/search?q=example.com%3Flang%3Des).

   • Pengaturan Pengguna: Memungkinkan pengguna untuk secara manual memilih bahasa yang mereka inginkan.

Implementasi i18n di Aplikasi Web

Meskipun prinsipnya sama, implementasi i18n bervariasi tergantung pada stack teknologi Anda. Sebagian besar framework atau library JavaScript memiliki library i18n yang direkomendasikan.

Contoh Umum: Menggunakan i18next (untuk React, Vue, Angular, Vanilla JS)

i18next adalah framework i18n yang sangat populer dan fleksibel. Ia memiliki banyak integrasi dengan framework UI seperti React (dengan react-i18next), Vue (vue-i18next), dan Angular.

Langkah 1: Instalasi i18next dan library yang relevan

Bash

# Untuk aplikasi JS/TS umum
npm install i18next

# Jika menggunakan React
npm install react-i18next i18next

# Jika menggunakan Vue
npm install vue-i18next i18next

Langkah 2: Konfigurasi i18next

Buat file konfigurasi (misalnya, i18n.js atau i18n.ts):

JavaScript

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next'; // Jika pakai React

// Impor terjemahan Anda
import enTranslation from './locales/en/translation.json';
import idTranslation from './locales/id/translation.json';

i18n
  .use(initReactI18next) // Tambahkan ini jika pakai React
  .init({
    resources: {
      en: {
        translation: enTranslation
      },
      id: {
        translation: idTranslation
      }
    },
    lng: 'en', // Bahasa default
    fallbackLng: 'en', // Jika terjemahan tidak ditemukan, fallback ke bahasa ini

    interpolation: {
      escapeValue: false // React sudah melakukan escaping secara default
    }
  });

export default i18n;

Langkah 3: Membuat File Terjemahan (JSON)

Organisir terjemahan Anda dalam file JSON, biasanya per bahasa dan per namespace (jika aplikasi Anda besar).

JSON

// locales/en/translation.json
{
  "welcomeMessage": "Welcome, {{name}}!",
  "greeting": "Hello",
  "farewell": "Goodbye",
  "item_one": "1 item",
  "item_other": "{{count}} items"
}

JSON

// locales/id/translation.json
{
  "welcomeMessage": "Selamat datang, {{name}}!",
  "greeting": "Halo",
  "farewell": "Sampai jumpa",
  "item_one": "1 barang",
  "item_other": "{{count}} barang"
}

Langkah 4: Menggunakan Terjemahan di Aplikasi Anda

a. Dengan React (menggunakan useTranslation hook):

JavaScript

// src/App.js
import React from 'react';
import { useTranslation } from 'react-i18next';
import './i18n'; // Pastikan file konfigurasi i18n diimpor

function App() {
  const { t, i18n } = useTranslation(); // 't' adalah fungsi terjemahan

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h1>{t('greeting')}</h1>
      <p>{t('welcomeMessage', { name: 'Pengguna' })}</p>

      {/* Contoh pluralisasi */}
      <p>{t('item', { count: 1 })}</p>
      <p>{t('item', { count: 5 })}</p>

      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('id')}>Indonesia</button>
    </div>
  );
}

export default App;

b. Dengan Vanilla JavaScript (jika tanpa framework):

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>i18n Example</title>
</head>
<body>
    <h1 id="greeting"></h1>
    <p id="welcome-message"></p>

    <button onclick="changeLang('en')">English</button>
    <button onclick="changeLang('id')">Indonesia</button>

    <script type="module">
        import i18n from './i18n.js'; // Sesuaikan path

        function updateContent() {
            document.getElementById('greeting').textContent = i18n.t('greeting');
            document.getElementById('welcome-message').textContent = i18n.t('welcomeMessage', { name: 'Pengguna' });
        }

        // Panggil saat inisialisasi dan setiap kali bahasa berubah
        i18n.on('languageChanged', () => {
            updateContent();
        });

        // Panggil pertama kali
        updateContent();

        window.changeLang = (lng) => {
            i18n.changeLanguage(lng);
        };
    </script>
</body>
</html>

Pertimbangan Tambahan untuk i18n

1. Format Tanggal/Waktu & Angka: Gunakan API bawaan browser seperti Intl.DateTimeFormat dan Intl.NumberFormat untuk memastikan format yang benar berdasarkan locale pengguna.

   JavaScript

   // Contoh Intl.DateTimeFormat
   const date = new Date();
   console.log(new Intl.DateTimeFormat('en-US').format(date)); // 7/1/2025
   console.log(new Intl.DateTimeFormat('id-ID').format(date)); // 1/7/2025
   
   // Contoh Intl.NumberFormat
   const number = 1234567.89;
   console.log(new Intl.NumberFormat('en-US').format(number)); // 1,234,567.89
   console.log(new Intl.NumberFormat('de-DE').format(number)); // 1.234.567,89
   

2. Right-to-Left (RTL) Layout: Untuk bahasa seperti Arab atau Ibrani, Anda perlu menyesuaikan tata letak CSS Anda. Properti CSS logical properties (misalnya, margin-inline-start daripada margin-left) sangat membantu, atau Anda bisa memiliki stylesheet terpisah untuk RTL.

3. Loading Terjemahan: Untuk aplikasi besar, jangan load semua terjemahan sekaligus. Gunakan lazy loading atau code splitting untuk memuat file terjemahan hanya saat dibutuhkan, berdasarkan bahasa yang dipilih pengguna.

4. SEO (Search Engine Optimization):

   • Gunakan atribut lang pada tag <html> Anda (<html lang="id">).

   • Gunakan hreflang tags di header HTML Anda untuk memberi tahu search engine tentang versi bahasa lain dari halaman Anda.

   • Gunakan struktur URL yang jelas untuk bahasa yang berbeda (misalnya, example.com/en/page dan example.com/id/page).

5. Font dan Karakter Set: Pastikan font yang Anda gunakan mendukung semua karakter yang diperlukan oleh bahasa yang berbeda. Umumnya, menggunakan UTF-8 sebagai encoding karakter sangat direkomendasikan.

6. Tes: Penting untuk menguji aplikasi Anda dalam setiap bahasa yang didukung untuk memastikan semua teks diterjemahkan dengan benar, format data ditampilkan dengan benar, dan layout tetap berfungsi.

Dengan menerapkan prinsip-prinsip ini dan menggunakan library i18n yang tepat, Anda dapat membuat aplikasi web yang siap untuk audiens global, meningkatkan jangkauan dan pengalaman pengguna.