บทความนี้จะพูดถึงวิธีที่คุณสามารถสลับภาษาด้วยตนเองในแอป next.js ของคุณ หากต้องการตั้งค่าคุณลักษณะนี้ คุณสามารถกลับไปที่ บทความก่อนหน้าของฉัน ดังนั้น ฉันคิดว่าแอปของคุณสามารถดึงสคริปต์ที่แตกต่างจากสคริปต์ภาษาที่เกี่ยวข้องได้แล้ว นอกจากนี้ ฉันได้สร้าง repo เพื่อสาธิตสิ่งนี้ ดังนั้นอย่าลังเลที่จะไปเยี่ยมชมที่นั่น
เพิ่มปุ่ม
ก่อนอื่น ฉันจะใช้ความช่วยเหลือของ material-UI เพื่อเพิ่มปุ่มสำหรับเปลี่ยนภาษา คุณสามารถเรียกใช้สิ่งนี้:
npm install @material-ui/icons @material-ui/core
หลังจากติดตั้งสำเร็จแล้ว คุณสามารถนำเข้าส่วนประกอบเหล่านี้ที่เราจะใช้:
import TranslateIcon from "@material-ui/icons/Translate" import { Button } from "@material-ui/core"
ด้วยรหัสง่ายๆดังนี้:
<Button aria-controls="simple-menu" aria-haspopup="true" color="primary" startIcon={<TranslateIcon />}>
Switch Language
</Button>
เราได้ปุ่มเปลี่ยนภาษา👇
ทำให้ปุ่มนั้นใช้งานได้!
ตอนนี้ถึงเวลาทำให้มันใช้งานได้โดยให้ปุ่มมีเมธอด onClick ดังนี้:
<Button aria-controls="simple-menu" aria-haspopup="true" color="primary" onClick={handleClick} startIcon={<TranslateIcon />}>
Switch Language
</Button>
ในฟังก์ชัน handleClick เราต้องทำสองสิ่ง:
- ตรวจสอบว่าเราใช้ภาษาอะไรอยู่ตอนนี้
- เปลี่ยนภาษาเป็นภาษาอื่น
โปรดจำไว้ว่าใน "บทความที่แล้ว" เราพูดถึงวิธีตั้งค่าไฟล์ชื่อ i18n.js ? เราจำเป็นต้องนำเข้า i18n จากสิ่งนี้:
import { withTranslation, i18n } from "../i18n"
แล้วเราก็สามารถใช้ i18n นั้นได้
หากต้องการ ตรวจสอบว่ามีการใช้งานภาษาใดอยู่ใช้ i18n.language ในกรณีของเรา มันจะบอกคุณว่าภาษาคือ zh หรือ en
หากต้องการเปลี่ยนภาษา เพียงใช้วิธีการที่มาพร้อมกับภาษานี้: changeLanguage คุณสามารถเรียกมันว่า: i18n.changeLanguage(the new language)
ตอนนี้เราสามารถใช้ทั้งสองวิธีนี้ในฟังก์ชัน handleClick ของเราได้ เนื่องจากในแอปเราอาจจะต้องใช้ภาษานั้นมาก (เพื่อตัดสินใจเลือกไอคอนหรือ UI อื่น ๆ ) ดังนั้นฉันจึงชอบใช้ state เพื่อจัดเก็บภาษาและใช้ในภายหลัง ดังนั้นฉันจึงตั้งค่าสถานะ language ก่อนและใช้ในฟังก์ชัน handleClick ของฉัน:
const [language, setLanguage] = useState("en")
const handleClick = () =>{
language=="en"? setLanguage("zh") : setLanguage("en")
i18n.changeLanguage(language)
}
ในบรรทัดแรก ฉันตัดสินใจว่าตอนนี้ใช้ภาษาอะไรอยู่ และตั้งค่า language เป็นภาษาอื่น จากนั้นจึงเปลี่ยนผ่านบรรทัดที่สองของโค้ด ที่เชื่อมโยงสถานะของฉันเองกับภาษา i18n
โบนัส: หากคุณต้องการให้ปุ่มแสดงภาษาปัจจุบันของคุณ เพียงเปลี่ยนรหัสในปุ่มดังนี้:
<Button aria-controls="simple-menu" aria-haspopup="true" color="primary" onClick={handleClick} startIcon={<TranslateIcon />}>
{i18n.language=="en"? "English" : "中文"}
</Button>
ดังนั้นข้อความที่เกี่ยวข้องจะแสดงผลขึ้นอยู่กับภาษาที่ใช้!
จบ
แค่นั้นแหละสำหรับสัปดาห์นี้! ครั้งต่อไป ฉันจะเขียนต่อเกี่ยวกับการเพิ่ม URL เฉพาะภาษาลงในแอปด้วย localSubPaths ขอบคุณที่อ่าน!
