Dukungan multi bahasa merupakan salah satu bagian dari App Internationalization, ini sangat penting karena mustahil semua orang bisa menguasai semua bahasa yang ada di dunia. 😂

Facebook.com

Bayangin kalo aplikasi Facebook, Instagram, dll hanya mendukung bahasa Cina, kita sebagai orang indonesia yang nggak ngerti artinya apaan, siapa yang mau pake sampe berjam-jam coba ??? 😜 jadi, dengan mengimplementasikan App Internationalization kita bisa menjangkau pengguna di berbagai belahan dunia.

Sesuai dengan judulnya, pada artikel kali ini kita akan membuat Fitur multi bahasa menggunakan React JS, ohya library yang akan kita pakai untuk membuat fitur multi bahasa adalah i18next, FYI library ini nggak cuma dikhususkan untuk React ya, bisa dipake juga untuk Vue, NodeJS, Ruby, PHP, dll. cek disini : https://www.i18next.com/

jalankan command berikut :

Copy
1npx create-react-app my-cool-app

setelah itu install library2 yang kita butuhkan untuk membuat fitur multi bahasa.

Copy
1yarn add i18next react-i18next i18next-http-backend i18next-browser-languagedetector

untuk menggunakan library ini, ada beberapa hal yang harus kita konfiguarsi, buat file i18n.js di dalam folder src yang berisi code berikut ini :

src/i18n.js
Copy
1import i18n from 'i18next';
2import { initReactI18next } from 'react-i18next';
3import Backend from 'i18next-http-backend';
4import LanguageDetector from 'i18next-browser-languagedetector';
5
6i18n
7  // untuk me-load file translasi melalui http (file-nya berada di public/locales/)
8  .use(Backend)
9  // untuk mendeteksi bahasa di browser
10  .use(LanguageDetector)
11  // agar kita bisa menggunakan library ini di semua component
12  .use(initReactI18next)
13  // inisialisasi library i18next
14  .init({
15    // ketika tidak ditemukan settingan bahasa
16    fallbackLng: 'id',
17  });
18
19export default i18n;

kemudian import konfigurasi tersebut ke dalam file index.js :

index.js
Copy
1import "./i18n.js";

untuk membuat kosakata terjemahan caranya sangat mudah, kita cukup menuliskannya ke dalam format json, yang berisi key dan value.

key : kata kunci yang akan dipakai untuk menerjemahkan

value : arti dari kata kunci tersebut

sekarang buatlah file bernama translation.json di dalam folder /public/locales/id/ dan /public/locales/en/

contoh isi file translation.json :

translation.json
Copy
1// ISI FILE : /public/locales/id/translation.json
2{
3  "welcome": "Hello <1>{{name}}</1>, Welcome !",
4  "laugh": "Hahahaha"
5}
6
7// ISI FILE : /public/locales/id/translation.json
8{
9  "welcome": "Hai <1>{{name}}</1>, Selamat Datang !",
10  "laugh": "Wkwkwkwk"
11}

Penjelasan kode :

• tag html <1> itu berguna untuk menyisipkan custom tag ketika kita translasi nantinya.

• {{name}} : untuk menerima props atau dynamic value.

Sebelum kita mengimplementasi multi bahasa, kita akan membuat component SwitchLangButton terlebih dahulu, component ini berfungsi untuk switch dari bahasa indonesia ke bahasa inggris atau sebaliknya.

Buatlah file SwitchLangButton.jsx yang berisi code berikut :

SwitchLangButton.jsx
Copy
1import React from "react";
2import { useTranslation } from "react-i18next";
3
4function SwitchLangButton() {
5  const { i18n } = useTranslation();
6  return (
7    <button
8      onClick={() => {
9        i18n.changeLanguage(i18n.language === "id" ? "en" : "id");
10      }}
11    >
12      UBAH KE BAHASA : {i18n.language === "id" ? "en" : "id"}
13    </button>
14  );
15}
16
17export default SwitchLangButton;

Penjelasan kode :

• i18n.language : akan mengembalikan string bahasa yang sedang aktif

• i18n.changeLanguage() : method untuk mengganti bahasa

untuk menerjemahkan konten, ada 2 cara yang bisa kita lakukan, yang pertama menggunakan useTranslation hook dan yang kedua menggunakan Trans Component.

Keuntungan menggunakan Trans component adalah kita bisa passing props dan menyisipkan tag html.

berikut ini adalah contoh penggunaannya :

App.js
Copy
1import React from "react";
2import logo from "./logo.svg";
3import "./App.css";
4import SwitchLangButton from "./SwitchLangButton";
5import { useTranslation, Trans } from "react-i18next";
6
7function App() {
8  const { t } = useTranslation();
9  const name = "Alfin";
10
11  return (
12    <div className="App">
13      <header className="App-header">
14        <img src={logo} className="App-logo" alt="logo" />
15        {/* CONTOH PENGGUNAAN Trans COMPONENT : */}
16        <h3>
17          <Trans i18nKey="welcome" name={name}>
18            Hello <i>{{ name }}</i>, Welcome !
19          </Trans>
20        </h3>
21
22        {/* CONTOH PENGGUNAAN useTranslation HOOK : */}
23        <p>{t("laugh")}</p>
24        <SwitchLangButton />
25      </header>
26    </div>
27  );
28}
29
30export default App;

oke, sekarang kita jalankan project kita :

Copy
1yarn start

Ooooopps… error gaes 😜

itu terjadi error karena kita tidak memberikan fallback ketika i18next sedang di-load, solusinya kita bisa set useSuspense di file i18n.js jadi false, atau kita wrap component <App/> dengan component <Suspense> di index.js sehingga menjadi seperti ini :

index.js
Copy
1import React, { Suspense } from "react";
2import ReactDOM from "react-dom";
3import "./index.css";
4import App from "./App";
5import * as serviceWorker from "./serviceWorker";
6import "./i18n.js";
7
8ReactDOM.render(
9  <React.StrictMode>
10    <Suspense fallback="Loading...">
11      <App />
12    </Suspense>
13  </React.StrictMode>,
14  document.getElementById("root")
15);
16
17// If you want your app to work offline and load faster, you can change
18// unregister() to register() below. Note this comes with some pitfalls.
19// Learn more about service workers: https://bit.ly/CRA-PWA
20serviceWorker.unregister();

klik Save dan buka lagi http://localhost:3000

Oke mungkin itu saja yang bisa saya bagikan kali ini, kalau kamu merasa artikel ini bermanfaat silakan Like & Share artikel ini ke teman-teman kamu atau jika kamu punya pertanyaan, tulis aja di kolom komentar, Thank you! 😁 🙏