การรองรับหลายภาษา (Internationalization)

เพิ่มการรองรับหลายภาษาให้กับแอปของคุณ ใช้ Proyecta Content API สำหรับการแปลเนื้อหาบรรณาธิการ หรือให้ AI เชื่อมต่อ i18n framework ลงในโค้ดโดยตรง

Proyecta รองรับสองแนวทางที่เสริมกันสำหรับการทำ internationalization ในแอปที่คุณสร้าง:

การแปลเนื้อหาผ่าน Proyecta Content API — สำหรับเนื้อหาบรรณาธิการ (บทความบล็อก คำถามที่พบบ่อย สำเนาการตลาด) ที่ต้องแปลเป็นหลายภาษา
i18n ระดับโค้ดผ่าน translation framework — สำหรับข้อความ UI, วันที่, สกุลเงิน และการสลับ locale ขณะรันไทม์

ทั้งสองแนวทางพร้อมใช้งานได้เลยตอนนี้ แนวทางไหนที่คุณต้องการขึ้นอยู่กับสิ่งที่คุณกำลังแปล

Proyecta ในฐานะ builder นั้นรองรับ 24 locale อยู่แล้ว ดังนั้นตัวผลิตภัณฑ์จึงเชี่ยวชาญด้าน i18n เป็นอย่างดี รูปแบบเดียวกันนี้สามารถนำไปใช้กับแอปที่คุณสร้างภายในได้เลย

ตัวเลือกที่ 1: การแปลเนื้อหา (Proyecta Content API)

ถ้าคุณกำลังสร้างเว็บไซต์ที่เน้นเนื้อหา เช่น บล็อก, knowledge base, หน้าการตลาด, แค็ตตาล็อกสินค้า — ให้ใช้การรองรับ locale ที่มีในตัวของ Content API

// Create the locales you support
await proyecta.content.locales.create({
    /* code: 'en', name: 'English' */
});
await proyecta.content.locales.create({
    /* code: 'es', name: 'Español' */
});
await proyecta.content.locales.create({
    /* code: 'fr', name: 'Français' */
});

// Then create entries that exist in multiple locales — fetch the right
// translation per request based on the user's locale.

แนวทางนี้เหมาะเมื่อ:

บรรณาธิการที่ไม่เขียนโค้ดต้องการแปลเนื้อหา
คุณต้องการให้การแปลสามารถจัดการเวอร์ชันได้
คุณต้องการการเผยแพร่เฉพาะ locale (การเผยแพร่แบบกำหนดเวลากำลังจะมาเร็ว ๆ นี้ — ขณะนี้ entries ต้องเผยแพร่ด้วยตนเองผ่าน API)

ดู Content Management สำหรับ Content API แบบเต็ม

ตัวเลือกที่ 2: i18n framework ระดับโค้ด

สำหรับข้อความ UI เช่น ป้ายกำกับ, ปุ่ม, ข้อความแสดงข้อผิดพลาด, วันที่, สกุลเงิน — ให้ถาม AI เพื่อเชื่อมต่อ i18n framework ลงในโปรเจกต์ของคุณโดยตรง:

Add internationalization to my app.
Support English, Spanish, French, and Arabic.
Add message catalogs in src/locales/.
Add a language switcher in the header.
Use locale-prefixed URLs like /en/about and /es/about.
Make sure RTL layout works correctly for Arabic.

AI จะดำเนินการดังนี้:

เลือก framework — AI จะใช้ i18next ร่วมกับ react-i18next (มาตรฐานของ Proyecta)
สร้างไฟล์ catalog ใน src/locales/ (JSON หนึ่งไฟล์ต่อหนึ่งภาษา)
ครอบข้อความ ด้วย t() calls (จาก useTranslation hook ของ react-i18next)
เพิ่มคอมโพเนนต์ language switcher
เชื่อมต่อ URL routing ด้วย locale prefix
จัดการเลย์เอาต์ RTL (dir="rtl") สำหรับภาษาอาหรับ, ฮีบรู ฯลฯ
จัดรูปแบบตัวเลข, วันที่ และสกุลเงิน ตาม locale

แปลอัตโนมัติด้วย AI

เมื่อภาษาหลักของคุณพร้อมแล้ว AI เก่งมากในการสร้างไฟล์ catalog สำหรับภาษาอื่น ๆ:

"Translate every string in src/locales/en.json into Spanish, French, German, and Japanese. Use natural, idiomatic phrasing — don't translate brand names."
"My app is fully built in English. Add Spanish translations for everything and an es/ route prefix."

สำหรับเนื้อหาที่มีความสำคัญสูง (ข้อความทางกฎหมาย, การแพทย์, การเงิน) ควรให้นักแปลที่เป็นมนุษย์ตรวจสอบผลลัพธ์จาก AI ก่อนที่จะ deploy

การใช้ทั้งสองแนวทางร่วมกัน

แอปส่วนใหญ่ในโลกจริงใช้ทั้งสองแนวทาง: i18n ระดับโค้ดสำหรับ UI chrome (ปุ่ม, ข้อความผิดพลาด, การนำทาง) และ Content API สำหรับเนื้อหาบรรณาธิการ (บทความ, คำอธิบายสินค้า) ทั้งสองอยู่ร่วมกันได้อย่างเรียบร้อย — i18n framework ของคุณจัดการไฟล์ catalog ในขณะ build time ส่วน Content API ให้บริการ entries ที่แปลแล้วในขณะ runtime

แนวทางปฏิบัติที่ดีที่สุด

เลือกภาษาหลักและตกลง copy ให้ชัดเจนก่อน การแปลสิ่งที่ยังเปลี่ยนอยู่ตลอดเวลานั้นยุ่งยากมาก
แปลเป็นกลุ่ม อย่าแปลไปทีละนิด — รอจนกว่าฟีเจอร์จะเสถียรก่อน
ทดสอบ RTL แต่เนิ่น ๆ ถ้าคุณรองรับภาษาอาหรับหรือฮีบรู บัก RTL มักซ่อนอยู่จนกว่าคุณจะดูจริง ๆ
ใส่ lang และ dir ใน <html> เบราว์เซอร์และโปรแกรมอ่านหน้าจอต้องพึ่งพาสิ่งนี้
ใช้ Intl สำหรับการจัดรูปแบบ อย่าเขียนการจัดรูปแบบวันที่หรือสกุลเงินเอง — ใช้ Intl.DateTimeFormat, Intl.NumberFormat

กำลังจะมาเร็ว ๆ นี้

UI จัดการ locale ใน builder — เลือก locale, ดูความครอบคลุมของการแปล, แก้ไข catalog โดยไม่ต้องออกจาก Proyecta
แปลอัตโนมัติเมื่อบันทึก สำหรับข้อความใหม่
เทมเพลตโปรเจกต์ที่พร้อมสำหรับ i18n โดยมี framework เชื่อมต่อไว้ล่วงหน้า