Artikel ini akan membahas tentang bagaimana Anda dapat mengganti bahasa secara manual di aplikasi next.js Anda. Untuk menyiapkan fitur ini, Anda dapat kembali ke artikel saya sebelumnya. Jadi saya berasumsi bahwa aplikasi Anda sudah dapat mengambil skrip yang berbeda dari skrip bahasa yang sesuai. Selain itu, saya juga membuat repo untuk mendemonstrasikannya, jadi silakan berkunjung ke sana.

Tambahkan Tombol

Pertama, saya akan menggunakan bantuan material-UI untuk sekadar menambahkan tombol untuk berpindah bahasa. Anda dapat menjalankan ini:

npm install @material-ui/icons @material-ui/core

Kemudian setelah instalasi berhasil, Anda dapat mengimport komponen-komponen yang akan kita gunakan ini:

import TranslateIcon from "@material-ui/icons/Translate"
import { Button } from "@material-ui/core"

Dengan beberapa kode sederhana seperti ini:

<Button aria-controls="simple-menu" aria-haspopup="true"  color="primary" startIcon={<TranslateIcon />}>
           Switch Language
</Button>

kami mendapatkan tombol untuk beralih bahasa👇

Jadikan tombol itu berfungsi!

Sekarang saatnya membuatnya berfungsi dengan memberikan tombol metode onClick seperti ini:

<Button aria-controls="simple-menu" aria-haspopup="true"  color="primary" onClick={handleClick} startIcon={<TranslateIcon />}>
           Switch Language
</Button>

Dalam fungsi handleClick, kita perlu melakukan dua hal:

  1. Deteksi bahasa apa yang kita gunakan saat ini.
  2. Ganti bahasa ke bahasa lain.

Ingat di artikel terakhir kita berbicara tentang cara menyiapkan file bernama i18n.js ? Kita perlu mengimpor i18n darinya seperti ini:

import { withTranslation, i18n } from "../i18n"

Dan kemudian kita bisa menggunakan i18n itu.

Untuk mendeteksi bahasa apa yang digunakan,gunakan i18n.language. Dalam kasus kami, ini akan memberi tahu Anda apakah bahasanya zh atau en.

Untukmengganti bahasa, cukup gunakan metode yang disertakan: changeLanguage. Anda dapat menyebutnya seperti ini: i18n.changeLanguage(the new language).

Jadi sekarang kita bisa menggunakan kedua metode tersebut di fungsi handleClick kita. Karena di dalam aplikasi, kita mungkin perlu sering menggunakan bahasa itu (untuk menentukan ikon atau UI lainnya), jadi saya suka menggunakan state untuk menyimpan bahasa tersebut dan menggunakannya nanti. Jadi saya menyiapkan status language terlebih dahulu dan menggunakannya dalam fungsi handleClick saya:

const [language, setLanguage] = useState("en")
const handleClick = () =>{
    language=="en"? setLanguage("zh") : setLanguage("en")
    i18n.changeLanguage(language)
  }

Pada baris pertama, saya memutuskan bahasa apa yang digunakan sekarang dan mengatur language menjadi bahasa lain dan kemudian mengubahnya melalui baris kode kedua. Itu menghubungkan negara bagian saya dengan bahasa i18n.

Bonus: Jika Anda ingin membuat tombol menampilkan bahasa Anda saat ini, cukup ubah kode di tombol seperti ini:

<Button aria-controls="simple-menu" aria-haspopup="true"  color="primary" onClick={handleClick} startIcon={<TranslateIcon />}>
           {i18n.language=="en"? "English" : "中文"}
</Button>

Jadi, bergantung pada bahasa yang digunakan, teks terkait akan ditampilkan!

Akhir

Itu saja untuk minggu ini! Lain kali saya akan melanjutkan dan menulis tentang menambahkan URL khusus bahasa ke aplikasi dengan localSubPaths. Terima kasih sudah membaca!

Sumber daya:

  1. paket berikutnya-i18berikutnya
  2. Contoh repo saya
  3. Tambahkan fitur terjemahan ke Aplikasi Next.js Anda Bagian 1: Siapkan paket next-i18next
  4. Tambahkan Fitur Terjemahan ke Aplikasi Next.JS Anda Bagian 3: Tambahkan URL khusus bahasa