Internationalization (i18n) di Next.js: Panduan Lengkap

IQBAL FARHAN SYUHADA

02 Nov 2024

Mengembangkan aplikasi web dengan jangkauan global sering kali membutuhkan dukungan untuk berbagai bahasa. Proses ini dikenal sebagai internationalization atau i18n. Dalam Next.js, i18n dapat diimplementasikan dengan mudah menggunakan beberapa fitur bawaan serta integrasi dengan pustaka pihak ketiga.

Pada artikel ini, kita akan membahas:

Apa itu i18n dan mengapa penting?
Dukungan bawaan i18n di Next.js
Menyiapkan i18n dengan Next.js
Menggunakan pustaka i18n seperti next-i18next
Praktek terbaik dalam i18n pada aplikasi Next.js

1. Apa itu i18n dan Mengapa Penting?

Internationalization atau i18n adalah proses membuat aplikasi agar mendukung banyak bahasa dan format regional. Angka "18" dalam istilah i18n mewakili jumlah huruf antara huruf pertama "i" dan terakhir "n". Dengan i18n, kita dapat menghadirkan pengalaman pengguna yang lebih lokal, relevan, dan sesuai dengan budaya mereka.

Keuntungan menggunakan i18n meliputi:

Meningkatkan pengalaman pengguna untuk berbagai negara dan budaya.
Memperluas jangkauan aplikasi secara global.
Menyesuaikan format waktu, mata uang, dan satuan sesuai regional.

2. Dukungan Bawaan i18n di Next.js

Next.js memiliki dukungan bawaan untuk i18n sejak versi 10. Framework ini memungkinkan kita mengkonfigurasi beberapa bahasa di file next.config.js tanpa menggunakan pustaka tambahan. Berikut adalah cara kerjanya:

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'de'], // Bahasa yang didukung
    defaultLocale: 'en', // Bahasa default
  },
}

locales: Menentukan daftar bahasa yang didukung aplikasi.
defaultLocale: Bahasa default yang digunakan jika tidak ada bahasa lain yang ditentukan.

Dengan konfigurasi ini, Next.js akan otomatis membuat route untuk setiap bahasa yang ditentukan, contohnya:

/ untuk bahasa default
/fr untuk bahasa Prancis
/de untuk bahasa Jerman

3. Menyiapkan i18n dengan Next.js

Setelah mengkonfigurasi i18n, kita dapat menggunakan useRouter dari next/router untuk mendapatkan informasi tentang bahasa yang sedang aktif. Contoh berikut menunjukkan cara menggunakannya dalam komponen:

import { useRouter } from 'next/router'

export default function HomePage() {
  const { locale, locales, defaultLocale } = useRouter()

  return (
    <div>
      <p>Bahasa yang sedang digunakan: {locale}</p>
      <p>Bahasa default: {defaultLocale}</p>
      <p>Bahasa yang didukung: {locales.join(', ')}</p>
    </div>
  )
}

4. Menggunakan Pustaka i18n: `next-i18next`

Meskipun Next.js memiliki dukungan bawaan untuk i18n, sering kali kita membutuhkan pustaka tambahan seperti next-i18next untuk manajemen yang lebih kompleks, seperti loading file terjemahan dari folder tertentu.

Berikut langkah-langkah untuk menggunakan next-i18next:

Instalasi:
```
npm install next-i18next
```

Konfigurasi: Buat file next-i18next.config.js di root proyek:

module.exports = {
  i18n: {
    locales: ['en', 'fr', 'de'],
    defaultLocale: 'en',
  },
}

Pengaturan di next.config.js: Tambahkan konfigurasi next-i18next ke next.config.js:

const { i18n } = require('./next-i18next.config')
module.exports = {
  i18n,
}

Membuat Folder Terjemahan: Buat folder public/locales, dan di dalamnya, buat folder untuk setiap bahasa (en, fr, de). Di setiap folder ini, buat file JSON untuk menyimpan teks terjemahan, misalnya common.json.

Contoh struktur:
```
public/
└── locales/
    ├── en/
    │   └── common.json
    ├── fr/
    │   └── common.json
    └── de/
        └── common.json
```

Menggunakan Terjemahan dalam Komponen: Untuk memanfaatkan i18n dalam komponen, gunakan useTranslation dari next-i18next:

import { useTranslation } from 'next-i18next'

const MyComponent = () => {
  const { t } = useTranslation('common')

  return <h1>{t('welcome_message')}</h1>
}

export default MyComponent

5. Praktek Terbaik dalam i18n di Next.js

Berikut beberapa tips untuk implementasi i18n yang lebih efektif:

Simpan Semua String di Satu Tempat: Gunakan satu file JSON per bahasa dan simpan semua string terjemahan dalam folder public/locales untuk manajemen yang mudah.
Gunakan Placeholder untuk Variabel: Saat menulis string terjemahan, gunakan placeholder untuk memudahkan penerapan dinamis. Misalnya:
```
"welcome_message": "Hello, {{name}}!"
```
Optimalkan Penggunaan Bahasa Default: Tentukan bahasa default sesuai pasar utama untuk mencegah aplikasi memuat bahasa yang tidak perlu bagi sebagian besar pengguna.

Kesimpulan

Implementasi i18n di Next.js memungkinkan aplikasi untuk mendukung berbagai bahasa dengan mudah. Dengan menggabungkan dukungan bawaan dan pustaka seperti next-i18next, pengembang dapat membuat aplikasi Next.js yang mudah diakses dan relevan bagi pengguna di seluruh dunia.

Semoga artikel ini membantu Anda dalam memulai implementasi i18n di aplikasi Next.js!