ใช้ React และ i18next สร้างเว็บแสดงข้อมูลหลายภาษาแบบง่ายมาก ๆ

บทความนี้จะสาธิตการใช้ React และ i18next สร้างเว็บหลายภาษาทั้งเมนูและข้อมูลที่เรียกจาก API จำลองข้อมูลแหล่งท่องเที่ยวบนเว็บไซต์ MeCallAPI.com หลักๆ คือเรียก API จาก URL นี้นะครับ

https://www.mecallapi.com/api/th/attractions (ภาษาไทย)
https://www.mecallapi.com/api/en/attractions (ภาษาอังกฤษ)

Software Installation

• Node.js https://nodejs.org

เริ่มต้นสร้างแอป

npx create-react-app react-multi-languages
cd react-multi-languages
npm install react-i18next i18next
npm install @material-ui/core @material-ui/icons react-router-dom
npm start

Let’s Code!

สร้างไฟล์ i18n.js

แก้ไขไฟล์ index.js

สร้างไฟล์ App.js

สร้างไฟล์ AttractionsPage.js

สร้างไฟล์ Navbar.js

สร้างไฟล์ Attractions.js เรียกข้อมูลแหล่งท่องเที่ยวจากภาษาที่เลือกผ่าน API
API URL (METHOD GET):
https://www.mecallapi.com/api/th/attractions
https://www.mecallapi.com/api/en/attractions

สร้างไฟล์ AttractionCard.js

ผลลัพธ์

แสดงภาษาไทย

แสดงภาษาอังกฤษ

บทความโดย อ.ดร.กานต์ ยงศิริวิทย์
วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต