วิธีการทำ React 2 ภาษาด้วย React i18n-next
สวัสดีครับ วันนี้ผมมีตัวอย่างการทำเว็บ 2 ภาษา ด้วย React กันครับ เผื่อว่าบางคนเวลาทำเว็บด้วย React แล้วเวลาใช้งานฟังค์ชัน 2 ภาษา อาจจะต้องส่ง key lang
แนบไปที่ header หรือว่าทุกๆ request แล้วให้ทางฝั่ง Server นั้นคอย handle แต่ว่าบทความนี้ไม่ใช่แบบนั้น แต่จะเป็นการเปลี่ยนภาษาทางฝั่ง Client ไปเลย ด้วยพระเอกของงานนี้ นั่นคือ React i18next นั่นเอง
ตัวอย่างการทำเว็บ 2 ภาษาด้วย React i18n Next
Step 1 : Create Project
เริ่มต้นสร้างโปรเจ็คขึ้นมาใหม่เลย ซึ่งในตัวอย่างนี้ผมจะใช้ Create React App
ในการสร้างเพราะมันง่าย ไม่ต้อง Setup อะไรให้มันยุ่งยากเท่าไหร่
สำหรับใครไม่รู้จัก หรือไม่เคยสร้างโปรเจ็คด้วย Create React App เชิญอ่านเพิ่มเติม Create React App
จะต้องได้หน้าเว็บแบบนี้ แสดงว่าเรามาถูกทางแล้ว
Step 2 : Setup i18n
ต่อมาทำการติดตั้ง Dependencies ต่างๆที่ใช้กับ React i18next กัน
i18next
: ตัว Library หลักreact-i18next
: ตัว Library ที่แปลงมาเป็นเวอร์ชันที่ใช้สำหรับ Reacti18next-xhr-backend
: เป็นคล้ายๆตัว Controller ที่มันจะโหลดไฟล์ locale JSON ให้เราและทำการ parse ข้อมูล
ต่อมาทำการสร้างไฟล์ i18n.js
ขึ้นมา (ที่เดียวกันกับ App.js
)
และก็ขั้นตอนสุดท้ายในการ Setup ก็คือทำการเพิ่มไฟล์ locale ซึ่ง default มันคือ locales/lang/trans.json
ซึ่งในบทความจะใช้ 2 ภาษาคือ ไทยและอังกฤษ ก็เลยสร้าง 2 ไฟล์คือ
/public/locales/en/trans.json
: สำหรับข้อมูลภาษาอังกฤษ/public/locales/th/trans.json
: สำหรับข้อมูลภาษาไทย
ตัวอย่างไฟล์ en/trans.json
ตัวอย่างไฟล์ th/trans.json
Step 3 : with High Order Function (HOC)
การใช้งาน i18next แบบง่ายสุด ก็คือทำผ่าน (HOC) (High Order Function)
วิธีการก็คือ เมื่อเรายัด component ผ่าน HOC แล้ว เราก็จะสามารถเรียก function t
ที่เป็น function ของ i18next ที่ให้เราสามารถเรียกใช้งานได้เลยผ่าน Props ตัวอย่าง เช่น
Step 4 : with Render Props
การใช้งาน i18next อีกแบบหนึ่งก็คือ การใช้งานผ่าน Render ผ่านตัว instance ของ i18next นั่นเอง
วิธีการก็คือเราต้องสร้าง children ภายใน <I18n>
เป็นฟังค์ชัน เพื่อทำการ render ประมาณนี้
Step 5 : Interpolate
ต่อมาการใช้งาน Interpolate หรือก็คือ Dynamic Message ตัวอย่าง เช่น เรา อยากให้มัน translate คำ โดยเปลี่ยนแปลงค่าตามตัวแปรที่เราต้องการ เช่น
ภาษาอังกฤษ
ภาษาไทย
ซึ่ง มันแปลให้อยู่แล้ว ในคำทักทาย แต่ว่าตัว currentUser
มันจะไม่แปลให้ และจะเปลี่ยนขึ้นอยู่กับว่า เราจะส่ง ตัวแปรอะไรไป และวิธีการเรียกใช้งานก็แค่ ส่ง Object พร้อม key เดียวกันกับไฟล์ locale ไป ใน argument ที่ 2 ดังเช่น
ซึ่งผลลัพธ์ก็จะได้เป็น
แค่นี้เอง ง่ายๆ
ซึ่ง Default ตัว interpolate จะดู key ตาม format
{{}}
แต่เราสามารถ custom ได้
Step 6 : Implement App.js
ต่อมา หลังจากดูตัวอย่างไปหลายๆแบบละ คราวนี้จะมาลองทำการ Implement App จริงๆ ต่อจาก Step ที่ 2 หลังจากที่เราได้ไฟล์ locales ของเราแล้ว ถัดมาคือการเปลี่ยนไฟล์ App.js
ซึ่งผมทำการ Custom ขึ้นมาดังนี้
และแก้ไฟล์ public/index.html
ซะหน่อย เนื่องจากผมใช้ Bulma มาเป็น CSS Framework
อธิบายเพิ่มเติมจาก App.js
ซักนิด
t('KEY_NAME')
: ทำการ translate ตาม key ที่มีในไฟล์ locale ของเราt('KEY_NAME', { key: value })
: ทำการ translate แบบ Dynamic โดยเปลี่ยนค่า template เป็น key ของเราi18n.changeLanguage()
: คือ method ที่เราใช้สำหรับเปลี่ยนภาษา โดยรับ เป็น locale เช่นen
,th
หรือde
เป็นต้นtranslate()(App)
: เป็น HOC ที่ทำให้เราสามารถเรียกใช้ props ของ i18next ได้เลย
ซึ่งจะบอกว่าตัวอย่างบทความนี้ก็เป็นเพียงแค่ Basic Example เท่านั้น มันยังสามารถ Custom หรือเรียกใช้ได้หลายๆแบบ เช่น ใช้ไฟล์ template หลายๆไฟล์ ทำยังไง แต่ละ Component จะใช้ locale แยกยังไง? หุ้ม i18nProvider
ไปเลยดีไหม หรือปรับเปลี่ยน template ในการทำ interpolation ก้ได้ เช่นจากใช้ {{}}
อาจจะเปลี่ยนเป็น []
หรือ ภายใน %%
อะไรก็ว่าไป
สุดท้าย Source Code ของบทความนี้ครับ
Reference
- Authors
-
Chai Phonbopit
เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust